这些代码是用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
}
});
答案 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
}]
});