计算 highstock 工具提示中 2 个系列之间的差异
calculate the difference between 2 series in tooltip for highstock
我需要一些帮助来找到在工具提示中显示系列之间差异的解决方案。
Here <- 是我的问题的简单截图:
我如何解决汉堡到 Matif 和下莱茵到 Matif 的问题?
这是我的 javascript 代码:
$(document).ready(function() {
//////////////////////////////////////////////////////////////////
// ------ Testchart Kassakurse Raps in Hamburg für 2014 ------ //
//////////////////////////////////////////////////////////////////
$(function() {
var chart = new Highcharts.StockChart({
legend: {
enabled: false
},
chart: {
renderTo: 'basis-tool_test',
plotBackgroundImage: 'images/background_large.png'
},
exporting: {
buttons: {
contextButton: {
enabled: false
},
printButton: {
text: 'Chart ausdrucken',
onclick: function () {
this.print();
}
}
}
},
xAxis: {
type: 'datetime',
minTickInterval: 24 * 3600 * 1000
},
title : {
text : 'Raps - Kassakurse im Jahr 2014',
style : { "textDecoration": "bold", "fontSize": "20px", "fontFamily": "Tahoma, arial, sans-serif" }
},
tooltip: {
xDateFormat: '%d. %B %Y',
shared: true,
useHTML: true,
valueDecimals: 2,
borderColor: '#000',
valueSuffix: ' €'
}
});
// Matif Daten
$.getJSON('scripts/charts/data_arrays/testchart_matifraps_data.js', function(data){
chart.addSeries({
id: 'id_matif',
name: 'Matif Raps',
data: data,
color: '#F7A35C'
}, true);
});
// Hamburg Daten
$.getJSON('scripts/charts/data_arrays/testchart_hamburgfrontmonat_data.js', function(data){
chart.addSeries({
id: 'id_hhfm',
name: 'Hamburg Frontmonat',
data: data,
color: '#7CB5EC',
tooltip: {
enabled: true,
/* pointFormat:'<span style="color:{series.color}">● </span> {series.name}: <b>{point.y}</b><br/><b>Basis: </b><br>' */
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.point.y + 'BÄÄÄÄM' ;
}
},
myData: 'firstPoint',
myOtherData: 'Other first data'
}, true);
});
$.getJSON('scripts/charts/data_arrays/testchart_hamburgfrontmonatplus1_data.js', function(data){
chart.addSeries({
id: 'id_hhfm1',
name: 'Hamburg Frontmonat +1',
data: data,
color: '#7CB5EC',
visible: false
}, true);
});
$.getJSON('scripts/charts/data_arrays/testchart_hamburgfrontmonatplus2_data.js', function(data){
chart.addSeries({
id: 'id_hhfm2',
name: 'Hamburg Frontmonat +2',
data: data,
color: '#7CB5EC',
visible: false
}, true);
});
// Niederrhein Daten
$.getJSON('scripts/charts/data_arrays/testchart_niederrheinfrontmonat_data.js', function(data){
chart.addSeries({
id: 'id_nrfm',
name: 'Niederrhein Frontmonat',
data: data,
color: '#434348'
}, true);
});
$.getJSON('scripts/charts/data_arrays/testchart_niederrheinfrontmonatplus1_data.js', function(data){
chart.addSeries({
id: 'id_nrfm1',
name: 'Niederrhein Frontmonat +1',
data: data,
color: '#434348',
visible: false
}, true);
});
$.getJSON('scripts/charts/data_arrays/testchart_niederrheinfrontmonatplus2_data.js', function(data){
chart.addSeries({
id: 'id_nrfm2',
name: 'Niederrhein Frontmonat +2',
data: data,
color: '#434348',
visible: false
}, true);
});
/* Legend */
// Buttons
$('#button_matif').click(function() {
var chart = $('#basis-tool_test').highcharts();
series = chart.get('id_matif');
if(series.visible) {
series.hide();
} else {
series.show();
}
});
$('#button_hamburg').click(function() {
var chart = $('#basis-tool_test').highcharts();
var selVal = $("#list").val();
if(selVal == "a") {
series = chart.get('id_hhfm');
if(series.visible) {
series.hide();
} else {
series.show();
}
}
if(selVal == "b") {
series = chart.get('id_hhfm1');
if(series.visible) {
series.hide();
} else {
series.show();
}
}
if(selVal == "c") {
series = chart.get('id_hhfm2');
if(series.visible) {
series.hide();
} else {
series.show();
}
}
});
$('#button_niederrhein').click(function() {
var chart = $('#basis-tool_test').highcharts();
var selVal = $("#list2").val();
if(selVal == "d") {
series = chart.get('id_nrfm');
if(series.visible) {
series.hide();
} else {
series.show();
}
}
if(selVal == "e") {
series = chart.get('id_nrfm1');
if(series.visible) {
series.hide();
} else {
series.show();
}
}
if(selVal == "f") {
series = chart.get('id_nrfm2');
if(series.visible) {
series.hide();
} else {
series.show();
}
}
});
// Selects
$("#list").on('change', function(){
var chart = $('#basis-tool_test').highcharts();
var selVal = $("#list").val();
if(selVal == "a" || selVal == '') {
series = chart.get('id_hhfm');
series.show();
series = chart.get('id_hhfm1');
series.hide();
series = chart.get('id_hhfm2');
series.hide();
}
else if(selVal == "b") {
series = chart.get('id_hhfm');
series.hide();
series = chart.get('id_hhfm1');
series.show();
series = chart.get('id_hhfm2');
series.hide();
}
else if(selVal == "c") {
series = chart.get('id_hhfm');
series.hide();
series = chart.get('id_hhfm1');
series.hide();
series = chart.get('id_hhfm2');
series.show();
}
});
$("#list2").on('change', function(){
var chart = $('#basis-tool_test').highcharts();
var selVal = $("#list2").val();
if(selVal == "d" || selVal == '') {
series = chart.get('id_nrfm');
series.show();
series = chart.get('id_nrfm1');
series.hide();
series = chart.get('id_nrfm2');
series.hide();
}
else if(selVal == "e") {
series = chart.get('id_nrfm');
series.hide();
series = chart.get('id_nrfm1');
series.show();
series = chart.get('id_nrfm2');
series.hide();
}
else if(selVal == "f") {
series = chart.get('id_nrfm');
series.hide();
series = chart.get('id_nrfm1');
series.hide();
series = chart.get('id_nrfm2');
series.show();
}
});
});
});
使用 tooltip.formatter
- 您可以在那里访问点数(this.points[0]
、this.points[1]
等)。只需计算 y 值之间的差异。
注意:tooltip.formatter
仅适用于最高级别的选项,例如 API。
演示:http://jsfiddle.net/bwefs1ak/
tooltip: {
formatter: function () {
var s = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>';
$.each(this.points, function () {
s += '<br/>Value: ' + this.y;
});
s+= '<br>Diff: ' + ( this.points[0].y - this.points[1].y );
return s;
}
},
我需要一些帮助来找到在工具提示中显示系列之间差异的解决方案。
Here <- 是我的问题的简单截图:
我如何解决汉堡到 Matif 和下莱茵到 Matif 的问题?
这是我的 javascript 代码:
$(document).ready(function() {
//////////////////////////////////////////////////////////////////
// ------ Testchart Kassakurse Raps in Hamburg für 2014 ------ //
//////////////////////////////////////////////////////////////////
$(function() {
var chart = new Highcharts.StockChart({
legend: {
enabled: false
},
chart: {
renderTo: 'basis-tool_test',
plotBackgroundImage: 'images/background_large.png'
},
exporting: {
buttons: {
contextButton: {
enabled: false
},
printButton: {
text: 'Chart ausdrucken',
onclick: function () {
this.print();
}
}
}
},
xAxis: {
type: 'datetime',
minTickInterval: 24 * 3600 * 1000
},
title : {
text : 'Raps - Kassakurse im Jahr 2014',
style : { "textDecoration": "bold", "fontSize": "20px", "fontFamily": "Tahoma, arial, sans-serif" }
},
tooltip: {
xDateFormat: '%d. %B %Y',
shared: true,
useHTML: true,
valueDecimals: 2,
borderColor: '#000',
valueSuffix: ' €'
}
});
// Matif Daten
$.getJSON('scripts/charts/data_arrays/testchart_matifraps_data.js', function(data){
chart.addSeries({
id: 'id_matif',
name: 'Matif Raps',
data: data,
color: '#F7A35C'
}, true);
});
// Hamburg Daten
$.getJSON('scripts/charts/data_arrays/testchart_hamburgfrontmonat_data.js', function(data){
chart.addSeries({
id: 'id_hhfm',
name: 'Hamburg Frontmonat',
data: data,
color: '#7CB5EC',
tooltip: {
enabled: true,
/* pointFormat:'<span style="color:{series.color}">● </span> {series.name}: <b>{point.y}</b><br/><b>Basis: </b><br>' */
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.point.y + 'BÄÄÄÄM' ;
}
},
myData: 'firstPoint',
myOtherData: 'Other first data'
}, true);
});
$.getJSON('scripts/charts/data_arrays/testchart_hamburgfrontmonatplus1_data.js', function(data){
chart.addSeries({
id: 'id_hhfm1',
name: 'Hamburg Frontmonat +1',
data: data,
color: '#7CB5EC',
visible: false
}, true);
});
$.getJSON('scripts/charts/data_arrays/testchart_hamburgfrontmonatplus2_data.js', function(data){
chart.addSeries({
id: 'id_hhfm2',
name: 'Hamburg Frontmonat +2',
data: data,
color: '#7CB5EC',
visible: false
}, true);
});
// Niederrhein Daten
$.getJSON('scripts/charts/data_arrays/testchart_niederrheinfrontmonat_data.js', function(data){
chart.addSeries({
id: 'id_nrfm',
name: 'Niederrhein Frontmonat',
data: data,
color: '#434348'
}, true);
});
$.getJSON('scripts/charts/data_arrays/testchart_niederrheinfrontmonatplus1_data.js', function(data){
chart.addSeries({
id: 'id_nrfm1',
name: 'Niederrhein Frontmonat +1',
data: data,
color: '#434348',
visible: false
}, true);
});
$.getJSON('scripts/charts/data_arrays/testchart_niederrheinfrontmonatplus2_data.js', function(data){
chart.addSeries({
id: 'id_nrfm2',
name: 'Niederrhein Frontmonat +2',
data: data,
color: '#434348',
visible: false
}, true);
});
/* Legend */
// Buttons
$('#button_matif').click(function() {
var chart = $('#basis-tool_test').highcharts();
series = chart.get('id_matif');
if(series.visible) {
series.hide();
} else {
series.show();
}
});
$('#button_hamburg').click(function() {
var chart = $('#basis-tool_test').highcharts();
var selVal = $("#list").val();
if(selVal == "a") {
series = chart.get('id_hhfm');
if(series.visible) {
series.hide();
} else {
series.show();
}
}
if(selVal == "b") {
series = chart.get('id_hhfm1');
if(series.visible) {
series.hide();
} else {
series.show();
}
}
if(selVal == "c") {
series = chart.get('id_hhfm2');
if(series.visible) {
series.hide();
} else {
series.show();
}
}
});
$('#button_niederrhein').click(function() {
var chart = $('#basis-tool_test').highcharts();
var selVal = $("#list2").val();
if(selVal == "d") {
series = chart.get('id_nrfm');
if(series.visible) {
series.hide();
} else {
series.show();
}
}
if(selVal == "e") {
series = chart.get('id_nrfm1');
if(series.visible) {
series.hide();
} else {
series.show();
}
}
if(selVal == "f") {
series = chart.get('id_nrfm2');
if(series.visible) {
series.hide();
} else {
series.show();
}
}
});
// Selects
$("#list").on('change', function(){
var chart = $('#basis-tool_test').highcharts();
var selVal = $("#list").val();
if(selVal == "a" || selVal == '') {
series = chart.get('id_hhfm');
series.show();
series = chart.get('id_hhfm1');
series.hide();
series = chart.get('id_hhfm2');
series.hide();
}
else if(selVal == "b") {
series = chart.get('id_hhfm');
series.hide();
series = chart.get('id_hhfm1');
series.show();
series = chart.get('id_hhfm2');
series.hide();
}
else if(selVal == "c") {
series = chart.get('id_hhfm');
series.hide();
series = chart.get('id_hhfm1');
series.hide();
series = chart.get('id_hhfm2');
series.show();
}
});
$("#list2").on('change', function(){
var chart = $('#basis-tool_test').highcharts();
var selVal = $("#list2").val();
if(selVal == "d" || selVal == '') {
series = chart.get('id_nrfm');
series.show();
series = chart.get('id_nrfm1');
series.hide();
series = chart.get('id_nrfm2');
series.hide();
}
else if(selVal == "e") {
series = chart.get('id_nrfm');
series.hide();
series = chart.get('id_nrfm1');
series.show();
series = chart.get('id_nrfm2');
series.hide();
}
else if(selVal == "f") {
series = chart.get('id_nrfm');
series.hide();
series = chart.get('id_nrfm1');
series.hide();
series = chart.get('id_nrfm2');
series.show();
}
});
});
});
使用 tooltip.formatter
- 您可以在那里访问点数(this.points[0]
、this.points[1]
等)。只需计算 y 值之间的差异。
注意:tooltip.formatter
仅适用于最高级别的选项,例如 API。
演示:http://jsfiddle.net/bwefs1ak/
tooltip: {
formatter: function () {
var s = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>';
$.each(this.points, function () {
s += '<br/>Value: ' + this.y;
});
s+= '<br>Diff: ' + ( this.points[0].y - this.points[1].y );
return s;
}
},