我有一个带有2个Y轴的时间序列散点图。我的一个数据集大约开始到绘图的一半。 chart.js的默认工具提示逻辑似乎是找到最接近的点并显示它们,尽管事实上其中一个点在x轴上距离很远。
在其他情况下,尽管两个数据集中的点均关闭,但工具提示中仅显示了两个数据集中的一个。
我已使用以下数据和选项初始化了图表:
选项:
options = {
"elements": {
"point": {
"radius": 0
}
},
"tooltips": {
"mode": "index",
"intersect": false
},
"scales": {
"xAxes": [
{
"type": "time",
"display": true,
"scaleLabel": {
"display": true,
"labelString": "Time"
},
"time": {
"unit": "minute"
},
"ticks": {
"min": 1537045081181,
"max": 1537045840058,
"suggestedMin": 1537045081181,
"suggestedMax": 1537045840058
}
}
],
"yAxes": [
{
"position": "right",
"id": "exptData",
"ticks": {
"beginAtZero": true,
"min": 0
},
"scaleLabel": {
"display": true,
"labelString": "Time/Iteration (ms)",
"fontColor": "rgba(128, 100, 100, 0.6)"
}
},
{
"ticks": {
"beginAtZero": false,
"stepSize": 20,
"fontcolor": "rgba(0, 153, 255, 0.9)"
},
"scaleLabel": {
"display": true,
"labelString": "Temperature (°C)",
"fontColor": "rgba(0, 153, 255, 0.9)"
},
"position": "left",
"id": "tempData"
}
]
}
}
数据:
data = {
"datasets": [
{
"label": "Temperature",
"fill": false,
"lineTension": 0,
"data": [...],
"borderColor": "rgba(0, 153, 255, 0.9)",
"backgroundColor": "rgba(0, 153, 255, 0.9)",
"borderWidth": 1.4,
"showLine": true,
"spanGaps": true,
"pointRadius": 0,
"yAxisID": "tempData"
},
{
"label": "Performance",
"yAxisID": "exptData",
"fill": false,
"lineTension": 0,
"showLine": true,
"spanGaps": true,
"pointRadius": 0,
"data": [...],
"borderWidth": 1.4,
"borderColor": "rgba(128, 100, 100, 0.6)",
"backgroundColor": "rgba(128, 100, 100, 0.6)"
}
]
}
这是我面临的问题的code pen example。