更改迷你图工具提示条件 [英] Change sparkline tooltip condition
本文介绍了更改迷你图工具提示条件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想从所需代码更改工具提示格式.在这段代码中，迷你图的工具提示指向各州，但我希望它指向月份.我也尝试过放置数组，但显示数组.我想在迷你图工具栏中的每个州显示不同的月份.
I want to change the tooltip format from the desired code. In this code the tooltip of the sparkline points to the states but I want it to point to the months. I have tried putting array also but showing up array. I want to display different months in every states in the sparkline toolbar.
示例:应该打印一月Q1二月Q2三月Q3四月Q4，而不是打印阿拉斯加Q1.
Example: Instead of printing Alaska, Q1 , It should print Jan Q1 Feb Q2 Mar Q3 Apr Q4.
我正在附加迷你图高位图表的代码.
I am attaching the code for the sparkline highcharts.
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: 'area',
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,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
hideDelay: 0,
shared: true,
padding: 0,
positioner: function (w, h, point) {
return { x: point.plotX - w / 2, y: point.plotY - h };
}
},
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'
}
}
};
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;
// Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
// can take some seconds, so we split the input into chunks and apply them in timeouts
// in order to avoid locking up the browser process and allow interaction.
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: 1
}],
tooltip: {
headerFormat: '<span style="font-size: 10px">' + $td.parent().find('th').html() + ', Q{point.x}:</span><br/>',
pointFormat: '<b>{point.y}.000</b> USD'
},
chart: chart
});
n += 1;
// If the process takes too much time, run a timeout to allow interaction with the browser
if (new Date() - time > 500) {
$tds.splice(0, i + 1);
setTimeout(doChunk, 0);
break;
}
// Print a feedback on the performance
if (n === fullLen) {
$('#result').html('Generated ' + fullLen + ' sparklines in ' + (new Date() - start) + ' ms');
}
}
}
doChunk();
#result {
text-align: right;
color: gray;
min-height: 2em;
}
#table-sparkline {
margin: 0 auto;
border-collapse: collapse;
}
th {
font-weight: bold;
text-align: left;
}
td, th {
padding: 5px;
border: 1px solid silver;
height: 20px;
}
thead th {
border-top: 2px solid gray;
border-bottom: 2px solid gray;
}
.highcharts-tooltip>span {
background: white;
border: 1px solid silver;
border-radius: 3px;
box-shadow: 1px 1px 2px #888;
padding: 8px;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="result"></div>
<table id="table-sparkline">
<thead>
<tr>
<th>State</th>
<th>Income</th>
<th>Income per quarter</th>
<th>Costs</th>
<th>Costs per quarter</th>
<th>Result</th>
<th>Result per quarter</th>
</tr>
</thead>
<tbody id="tbody-sparkline">
<tr>
<th>Alabama</th>
<td>254</td>
<td data-sparkline="71, 78, 39, 66 "/>
<td>296</td>
<td data-sparkline="68, 52, 80, 96 "/>
<td>-42</td>
<td data-sparkline="3, 26, -41, -30 ; column"/>
</tr>
<tr>
<th>Alaska</th>
<td>246</td>
<td data-sparkline="87, 44, 74, 41 "/>
<td>181</td>
<td data-sparkline="29, 54, 73, 25 "/>
<td>65</td>
<td data-sparkline="58, -10, 1, 16 ; column"/>
</tr>
</tbody>
</table>
推荐答案
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: 'area',
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: [],
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
hideDelay: 0,
shared: true,
padding: 0,
positioner: function (w, h, point) {
return { x: point.plotX - w / 2, y: point.plotY - h };
},
formatter: function() {
// If you want to see what is available in the formatter, you can
// examine the `this` variable.
// console.log(this);
return '<b>'+ Highcharts.numberFormat(this.y, 0) +'</b><br/>'+
'The month: '+ this.x;
}
},
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'
}
}
};
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;
// Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
// can take some seconds, so we split the input into chunks and apply them in timeouts
// in order to avoid locking up the browser process and allow interaction.
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: 1
}],
tooltip: {
headerFormat: '<span style="font-size: 10px">' + $td.parent().find('th').html() + ', Q{point.x}:</span><br/>',
pointFormat: '<b>{point.y}.000</b> USD'
},
chart: chart
});
n += 1;
// If the process takes too much time, run a timeout to allow interaction with the browser
if (new Date() - time > 500) {
$tds.splice(0, i + 1);
setTimeout(doChunk, 0);
break;
}
// Print a feedback on the performance
if (n === fullLen) {
$('#result').html('Generated ' + fullLen + ' sparklines in ' + (new Date() - start) + ' ms');
}
}
}
doChunk();
#result {
text-align: right;
color: gray;
min-height: 2em;
}
#table-sparkline {
margin: 0 auto;
border-collapse: collapse;
}
th {
font-weight: bold;
text-align: left;
}
td, th {
padding: 5px;
border: 1px solid silver;
height: 20px;
}
thead th {
border-top: 2px solid gray;
border-bottom: 2px solid gray;
}
.highcharts-tooltip>span {
background: white;
border: 1px solid silver;
border-radius: 3px;
box-shadow: 1px 1px 2px #888;
padding: 8px;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="result"></div>
<table id="table-sparkline">
<thead>
<tr>
<th>State</th>
<th>Income</th>
<th>Income per quarter</th>
<th>Costs</th>
<th>Costs per quarter</th>
<th>Result</th>
<th>Result per quarter</th>
</tr>
</thead>
<tbody id="tbody-sparkline">
<tr>
<th>Alabama</th>
<td>254</td>
<td data-sparkline="71, 78, 39, 66 "/>
<td>296</td>
<td data-sparkline="68, 52, 80, 96 "/>
<td>-42</td>
<td data-sparkline="3, 26, -41, -30 ; column"/>
</tr>
<tr>
<th>Alaska</th>
<td>246</td>
<td data-sparkline="87, 44, 74, 41 "/>
<td>181</td>
<td data-sparkline="29, 54, 73, 25 "/>
<td>65</td>
<td data-sparkline="58, -10, 1, 16 ; column"/>
</tr>
</tbody>
</table>
只需包括xAxis类别.然后根据需要在工具提示格式化程序中添加HTML.
Just include the xAxis categories. Then add your HTML in tooltip formatter according to your need.
这篇关于更改迷你图工具提示条件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
