我在桌子上用高图迷你图。这是我生成火花线的代码。它是使用php脚本生成的。所以你会在里面找到一些php变量：
$(function () {
$(document).ready(function() {
Highcharts.SparkLine = function (a, b, c) {
const hasRenderToArg = typeof a === 'string' || a.nodeName;
let options = arguments[hasRenderToArg ? 1 : 0];
const defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || (hasRenderToArg && a),
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
width: 40,
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: {
hideDelay: 0,
outside: true,
shared: true
},
exporting: {
enabled: false
},
plotOptions: {
series: {
animation: false,
lineWidth: 2,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
},
column: {
negativeColor: '#c3d3a4',
color: '#729d34',
borderColor: 'none'
},
bar: {
negativeColor: '#c3d3a4',
color: '#729d34',
borderColor: 'none'
}
}
};
options = Highcharts.merge(defaultOptions, options);
return hasRenderToArg ?
new Highcharts.Chart(a, options, c) :
new Highcharts.Chart(options, b);
};
const start = +new Date(),
tds = Array.from(document.querySelectorAll('td[data-sparkline]')),
fullLen = tds.length;
let n = 0;
function doChunk() {
const time = +new Date(),
len = tds.length;
for (let i = 0; i < len; i += 1) {
const td = tds[i];
const stringdata = td.dataset.sparkline;
const arr = stringdata.split('; ');
const data = arr[0].split(', ').map(parseFloat);
const chart = {};
if (arr[1]) {
chart.type = arr[1];
}
Highcharts.SparkLine(td, {
series: [{
data: data,
pointStart: 1
}],
tooltip: {
headerFormat: '<span style=\"font-size: 10px\">' + td.parentElement.querySelector('th').innerText + ':</span><br/>',
pointFormat: '<b>{point.y}</b>'
},
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;
}
}
}
doChunk();
});
});
我有一些无法解决的问题：
- 我当前使用td.parentElement.querySelector（'th'）.innerText获取工具提示中第一列的文本
如果我的桌子看起来像：
<table> <tr><th>Amsterdam</th><td>43 People</td><td data-sparkline="-5"></td></tr> <tr><th>Paris</th><td>20 People</td><td data-sparkline="2"></td></tr> </table>
它工作得很好。
但我喜欢将表结构从th更改为td：
<table> <tr><td>Amsterdam</td><td>43 People</td><td data-sparkline="-5"></td></tr> <tr><td>Paris</td><td>20 People</td><td data-sparkline="2"></td></tr> </table>
如何在工具提示“td.parentElement.querySelector（'td:first？？？？'）.innerText”中显示表行的第一列
- 正如你在图片中看到的，一行中的正值和负值没有相同的起点
它必须看起来像：
中间应该有一个固定的x轴，正值指向右侧，负值指向左侧，中点在所有行上都是固定的，每行的缩放比例相同。因此，值越大，条越长，值越小，条越短。