带有2个Y轴的散点图中的怪异工具提示

时间:2018-09-20 15:01:04

标签: chart.js

我有一个带有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

0 个答案:

没有答案