javascript - Chart.js 两个 y 轴折线图工具提示值对于第二个 y 轴不正确

Question

我用 chart.js 创建了一个工作图表，我想解决我注意到的一个小问题。

看看at this pen.或下面的副本。

// Global settings for all charts
// set default to not fill any lines
Chart.defaults.global.elements.line.fill = false;

// lines chart with 4 lines and time on x axis
var ChartData = {
  labels: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
  datasets: [{
    type: 'line',
    label: 'A',
    yAxisID: "y-axis-1",
    backgroundColor: "rgba(110,250,150,0.3)",
    borderColor: "rgba(110,250,150,0.5)",
    data: [2500, 2600, 4100, 3400, 2150, 3560, 4500]
  }, {
    type: 'line',
    label: 'B',
    yAxisID: "y-axis-1",
    backgroundColor: "rgba(50,255,90,0.3)",
    borderColor: "rgba(50,255,90,0.5)",
    data: [420, 510, 900, 700, 920, 950, 820]
  }, {
    type: 'line',
    label: 'Wait',
    yAxisID: "y-axis-2",
    backgroundColor: "rgba(255,000,000,0.3)",
    borderColor: "rgba(255,000,000,0.8)",
    data: ['00:28', '00:45', '00:15', '00:12', '00:22', '00:55', '00:10']
  }, {
    type: 'line',
    label: 'D',
    yAxisID: "y-axis-1",
    backgroundColor: "rgba(120,180,255,0.3)",
    borderColor: "rgba(120,180,255,0.5)",
    data: [4200, 1100, 1300, 1850, 1780, 2440, 3800]
  }]
};


var ctx = document.getElementById("Chart");
// declare a chart
var chart = new Chart(ctx, {
  type: 'line',
  data: ChartData,
  options: {
    title: {
      display: true,
      text: "Chart.js line Two Y Axis"
    },
    tooltips: {
      mode: 'label'
    },
    responsive: true,
    scales: {
      xAxes: [{
        type: 'time',
          time: {
            parser: 'hh:mm:ss',
            unit: 'seconds',
            unitStepSize: 3600,
            min: '08:00:00',
            max: '14:00:00',
            displayFormats: {
              'seconds': 'HH:mm'
            }
          },
        scaleLabel: {
          display: true,
          labelString: 'Time'
        },
          // makes time durations on x axis stay in linier time scale.
          distribution: 'linear',
      }],
      yAxes: [{
        id: "y-axis-1",
        position: "left",
        scaleLabel: {
          display: true,
          labelString: 'Other Title Here'
        }
      }, {
        id: "y-axis-2",
        position: "right",
          ticks: {
          max: '20:00',
          min: '00:00'
        },
        type: 'time',
          time: {
            parser: 'mm:ss',
            unit: 'seconds',
            unitStepSize: 3600,
            min: '08:00:00',
            max: '14:00:00',
            displayFormats: {
              'seconds': 'MM.ss'
            }
          },
        scaleLabel: {
          display: true,
          labelString: 'Wait (mm:ss)',
          fontColor: 'rgba(255,0,0,0.8)'
        },
        type: 'time',
          time: {
            parser: 'mm:ss',
            unit: 'seconds',
            unitStepSize: 60,
            min: '00:00',
            max: '20:00',
            displayFormats: {
              'seconds': 'mm.ss'
            }
          },
      }]
    }
  }
});

如果将指针移到红线数据上的点上，您会看到工具提示显示所有其他线的正确值，但它显示的不是红线的正确值，而是时间 I在 x 轴上。红色值的实际图表线在正确的位置，只有工具提示中的值是错误的。在此示例中，红线是唯一一条使用右侧第二个 y 轴的线，因此我认为它与此有关。

我看过this question here但是我的轴已经设置为时间类型，假设我正确地遵循了那个答案。

我该如何纠正这个问题？

注意:x 轴时间是一天中从上午 8 点到下午 2 点的时间。右边第二个 y 轴上的时间不是一天中的时间，而是以分钟为单位的时间长度。

Answer 1

您必须指定每个等待数据的X轴。
将它像这样粘贴到您的代码中:

data: [
    { x: "08:00", y: "00:28" },
    { x: "09:00", y: "00:45" },
    { x: "10:00", y: "00:15" },
    { x: "11:00", y: "00:12" },
    { x: "12:00", y: "00:22" },
    { x: "13:00", y: "00:55" },
    { x: "14:00", y: "00:10" }
]