highcharts StockChart将多个值传递给工具提示

时间:2017-03-24 06:50:56

标签: javascript highcharts

这些代码是用javascript编写的,并使用下面的hightChart StockChart。

程序可以通过stockChart中的datetime和report_value1绘制图表,并在工具提示中显示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
                }
            });

1 个答案:

答案 0 :(得分:0)

我努力地尝试。

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
    }]
});