我正在使用sparkline,但我有两个不同的sparkline图:一个是公司季度利润(EUR),另一个是本年度与前一年度的差额(%)。
显示代码:
Highcharts.SparkLine = function(a, b, c) {
var hasRenderToArg = typeof a === 'string' || a.nodeName,
options = arguments[hasRenderToArg ? 1 : 0],
defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || this,
backgroundColor: null,
borderWidth: 0,
type: 'bar',
margin: [2, 0, 2, 0],
width: 120,
height: 20,
style: {
overflow: 'visible'
},
// small optimalization, saves 1-2 ms each sparkline
skipClone: true
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
min: -200,
max: 200,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
tooltip: {
hideDelay: 0,
outside: true,
shared: true
},
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
},
column: {
negativeColor: '#910000',
borderColor: 'silver'
},
bar: {
negativeColor: '#910000',
borderColor: 'silver',
tooltip: {
},
}
}
};
options = Highcharts.merge(defaultOptions, options);
return hasRenderToArg ?
new Highcharts.Chart(a, options, c) :
new Highcharts.Chart(options, b);
};
var start = +new Date(),
$tds = $('td[data-sparkline]'),
fullLen = $tds.length,
n = 0;
function doChunk() {
var time = +new Date(),
i,
len = $tds.length,
$td,
stringdata,
arr,
data,
chart;
for (i = 0; i < len; i += 1) {
$td = $($tds[i]);
stringdata = $td.data('sparkline');
arr = stringdata.split('; ');
data = $.map(arr[0].split(', '), parseFloat);
chart = {};
if (arr[1]) {
chart.type = arr[1];
}
$td.highcharts('SparkLine', {
series: [{
data: data,
pointStart: 0
}],
tooltip: {
headerFormat: '<span style="font-size: 13px">' + $td.parent().find('th').html() + ', T{point.x}:</span><br/>',
pointFormat: '<b>{point.y}</b>€'
},
chart: chart
});
n += 1;
}
}
doChunk();
[对不起,我不能通过声誉发布图像。点击链接查看][1]
我的问题是:我认为我的问题是工具提示,这使用相同的两个图形,我希望第一个Spark线是像现在(季度和欧元),但第二,我想显示我的百分比(%).
有人知道怎么修吗?
感谢[1]:https://i.stack.imgur.com/kDl16.png
如何设置两个Y轴?在我的例子中,我需要一个y轴用于条形线(-200到200),另一个用于列或区域,因为它们是经济值。
yAxis: [{
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0],
min: -100,
max: 100,
}],
1条答案
按热度按时间x3naxklr1#
您可以使用
tooltip.formatter()
回调函数根据点、系列或图表信息有条件地显示内容:Demo:https://jsfiddle.net/BlackLabel/qdo2fk9c/
API:https://api.highcharts.com/highcharts/tooltip.formatter