自定义工具提示并将值链接到表单域——highcharts / columnrange

Question

各位高，

我正在努力让两件事发生。首先，我想为 columnrange-type 系列创建一个自定义工具提示，其中工具提示显示类似 HIGH: 'this.point.high' 和新行“LOW:”'this.point.low' 的内容。其次，我希望这些 'low' 和 'high' 值动态填充表单字段。例如，当用户拖动 columnrange 条目的高值时，我希望它动态更新收集用户输入的相应表单字段中的数字。

这是一个fiddle：https://jsfiddle.net/e9zqmy12/

代码：


<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    
 
</figure>



    


var myChart;

Highcharts.setOptions({
    plotOptions: {
        series: {
            animation: false
        }
    }
});

// draw chart
  myChart = Highcharts.chart('container', 
 {
    chart: {
      type: "line",
      events: {
            click: function (e) {
                // find the clicked values and the series
               var y = Math.round(e.yAxis[0].value),
                   x=12
                   series = this.series[3].data[12];
                series.update({x, y, color: 'blue'});
               
            },
            drag: function (e) {
                 var y = Math.round(e.yAxis[0].value),
                   x=12
                   series = this.series[3].data[12];
                series.update({x, y, color: 'blue'});
               
            }
        }
     
    },
    title: {
      text: "Forecasting History"
    },
    


    xAxis: {
      type: 'category',
      allowDecimals: true,
      title: {
        text: "Quarter"
      },
      

    plotBands: [{
    color: 'rgba(204,153,255,0.2)', // Color value
    from: 11.5, // Start of the plot band
    to: 12.5, // End of the plot band
    label: {
                    text: 'Forecast'
                }
   
    }]
    },
    yAxis: {
      title: {
        text: "Inflation (%)"
      },
      plotLines: [{
        value: 0,
        width: 2,
        color: '#aaa',
        zIndex: 10
      }]
    },
   tooltip: {
        style: {
            color: 'black',
            fontWeight: 'bold',
            fontSize: 13
        },
     positioner: function () {
            return { x: 80, y:0 };
        },
    shared: true,
    headerFormat: '',
    valueDecimals: 2,
    shadow: false,
    borderWidth: 2,
    borderColor: '#000000',
    shape: 'rect',
    backgroundColor: 'rgba(255,255,255,0.8)'
  },
 
    series: [
        
            {
              name: 'Inflation',
              data: [3.9,4.98,5.72,5.73,3.61,3.68,3.72,2.64,2.1,1.94,1.99,1.87,null],
              tooltip: {
              pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
            },
            },{
               name: 'Central Bank Forecast',
               data: [2,3.47,4.2,4.62,4.51,3.079,3.13,3.15,2.43,2.17,1.7,2.17,null],
                tooltip: {
              pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
            },
             },{
               name: 'Your Forecast',
               showInLegend: false,
               data: [null,null,null,null,null,null,null,null,null,null,null,null,2],
                  tooltip: {
              pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
            },
               marker: {
               radius: 2.5,
               fillColor: 'red'
     
              },
             },{

                plotOptions: {
                    columnrange: {
                                dataLabels: {
                                    enabled: true,
                                   
                                }
                    }
                    
                    },
                
                    
               name: 'Forecast Range',
               color: 'rgba(255,0,0,.1)',
               type: 'columnrange',
               data: [[12,1,3]],
               tooltip: {
            
            pointFormatter: function() {
            
                console.log(this);
                return "LOW: "+this.point.low + " HIGH:" +this.point.high;
            }
        },
               
          
                 dragDrop: {
                 draggableY: true,
                 groupBy: 'GroupId',
                 dragMinY: -10,
                 dragMaxY: 10,
                 dragPrecisionY: .01,
                 liveRedraw: false
                    },
            }
            ], 
    });

Answer 1

除了这个回调 pointFormatter 回调之外，你的代码似乎几乎不错 - 注意这已经调用了 point，所以 this.point 指的是未定义的，它应该是：

  tooltip: {
    pointFormatter: function() {

      console.log(this);
      return "LOW: " + this.low + "  <br>HIGH:" + this.high;
    }
  },

演示：https://jsfiddle.net/BlackLabel/vbo6j9em/

自定义工具提示并将值链接到表单域——highcharts / columnrange

customized tooltip and linking values to formfields -- highcharts / columnrange

javascript

html

highcharts

otree