highcharts StockChartは複数の値をツールチップに渡します

Question

これらのコードは、javascriptで書かれており、以下のhightChart StockChartを使用しています。

プログラムは、日時とreport_value1によってchartをchartで描画し、ツールチップにreport_value1を表示することができます。

ツールチップのpointFormatに表示する値をさらに追加します。

ツールチップにspeed_dataのrpm値を表示するコードを追加するにはどうすればよいですか？

var speed_data = []; 

    for (var i = 0; i < _datalenght; i++) { 
       v = sData[i]; 
       speed_data.push([ 
        v.report_time * 1000, 
        v.report_value1, 
        v.rpm, 
       ]); 
    } 
    fuelchart = new Highcharts.StockChart({ 
       chart: { 
        renderTo: "speed_chart_div", 
        type: 'line', 
        zoomType: 'x', 
        marginRight: 10, 
        backgroundColor: null 
       }, 
       rangeSelector: { 
        buttons: [{ 
         type: 'minute', 
         count: 5, 
         text: '5min' 
        }, { 
         type: 'minute', 
         count: 30, 
         text: '30min' 
        }, { 
         type: 'hour', 
         count: 1, 
         text: '1hour' 
        }, { 
         type: 'hour', 
         count: 4, 
         text: '4hour' 
        }, { 
         type: 'hour', 
         count: 8, 
         text: '8hour' 
        }, { 
         type: 'all', 
         count: 1, 
         text: 'all' 
        }], 
        selected: 5, 
        inputEnabled: false 
       }, 
       title: { 
        text: null 
       }, 
       subtitle: { 
        text: '' // dummy text to reserve space for dynamic subtitle 
       }, 
       scrollbar: { 
        barBackgroundColor: 'gray', 
        barBorderRadius: 7, 
        barBorderWidth: 0, 
        buttonBackgroundColor: 'gray', 
        buttonBorderWidth: 0, 
        buttonBorderRadius: 7, 
        trackBackgroundColor: 'none', 
        trackBorderWidth: 1, 
        trackBorderRadius: 8, 
        trackBorderColor: '#CCC' 
       }, 
       xAxis: { 
        type: 'datetime', 
        ordinal: false 
       }, 
       yAxis: { 
        title: { 
         text: JLANG.REPORT_SPEED 
        }, 
        min: 0 
       }, 
       legend: { 
        enabled: false 
       }, 
       exporting: { 
        enabled: false 
       }, 
       plotOptions: { 
        line: { 
         lineWidth: 2, 
         states: { 
          hover: { 
           lineWidth: 3 
          } 
         } 
        } 
       }, 
       series: [{ 
        name: JLANG.REPORT_SPEED, 
        type: 'area', 
        color: '#357EC7', 
        lineWidth: 1, 
        data: speed_data, 
        tooltip: { 
         valueDecimals: 0, 
         useHTML: true, 
         headerFormat: '<span style="color: {series.color}; font-size:15px;"><b>{point.key}</b></span>', 
         pointFormat: 
          '<br/><div><span style="color: {series.color}; font-size:15px;">{series.name}: </span></div>' + '<div><span style="text-align: right; font-size:15px;"><b>{point.y} km/h</b></span></div>' + 
          '<br/><div><span style="color: {series.color}; font-size:15px;">rpm: </span></div>' + '<div><span style="text-align: right; font-size:15px;"><b>{???} </b></span></div>' 
         , 
         xDateFormat: '%H:%M:%S %d-%m-%Y' 

        }, 

        gapSize: 0, 
        fillColor: { 
         linearGradient: { 
          x1: 0, 
          y1: 0, 
          x2: 0, 
          y2: 1 
         }, 
         stops: [ 
          [0, Highcharts.getOptions().colors[0]], 
          [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] 
         ] 
        }, 
        threshold: null 
       }], 
       credits: { 
        enabled: false 
       } 
      }); 

Answer 1

私はそれを十分に試してみます。

usdeur = [[1187654400000,0.7429,1],[1187740800000,0.7383,2],[1187827200000,0.7369,3]]; 

propertyData = []; 
//propertyData[1187654400000] = {"a":1,"b":2}; 
//propertyData[1187740800000] = {"a":3,"b":4}; 
//propertyData[1187827200000] = {"a":5,"b":6}; 

for (var i = 0; i < usdeur.length; i++) { 
    propertyData[usdeur[i][0]] = {"a":i,"b":i+1}; 
} 


Highcharts.stockChart('container', { 
      xAxis: { 
       type: 'datetime', 
       ordinal: false 
      }, 
      yAxis: { 
       title: { 
        text: "speed" 
       }, 
       min: 0 
      }, 
      legend: { 
       enabled: false 
      },  
         credits: { 
       enabled: false 
      }, 
    tooltip: { 
      valueDecimals: 0, 
     useHTML: true, 
     xDateFormat: '%H:%M:%S %d-%m-%Y', 
/*  pointFormat: 
        '<br/><div><span style="color: {series.color}; font-size:15px;">{series.name}: </span></div>' +    
        '<div><span style="text-align: right; font-size:15px;"><b>{propertyData[point.x]}.{point.y} km/h</b></span></div>', 
    */      

     formatter: function() { 
      var s = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>'; 

         $.each(this.points, function() { 
       s += '<br/>1 USD = ' + this.y + ' EUR<br/>' + 
        propertyData[this.x]["a"] + "<br/>" + 
        propertyData[this.x]["b"] ; 
      }); 

      return s; 
     } 

    }, 

    rangeSelector: { 
     selected: 1 
    }, 

    series: [{ 
      type: 'area', 
     name: 'USD to EUR', 
     data: usdeur 
    }] 
});