Question

我正在使用Chart.js 2.x折线图来创建时间轴事件图表。

它运行良好但我无法弄清楚当鼠标越过一条线时如何显示工具提示。我想要显示的信息与标签中显示的信息相同（在下面的示例中＆＃39;标签A＆＃39;，＆＃39;标签B＆＃39;或＆＃39;标签C＆＃39;。我尝试过添加工具提示选项enabled = true和mode = label，但它不起作用。

这是我的JSFiddle

这是我的代码：

HTML

<div style="height: 250px;">
<canvas id="timeline"></canvas>
</div>

的Javascript

var ctx = $("#timeline").get(0).getContext("2d");

var data = {
  labels: ['Red','Blue','Yellow'],
  datasets: [
    {
      label: 'Label A',
      backgroundColor: "rgba(208,255,154,1)",
      borderColor: "rgba(208,255,154,1)",
      fill: false,
      borderWidth : 15,
      pointRadius : 0,
      data: [
        {
          x: new Date(2014,01,01),
          y: 3                                                    
        }, {
            x: new Date(2017,10,01),
            y: 3                                                    
        }
      ]
    },
    {
      label: 'Label B',
      backgroundColor: "rgba(208,255,154,1)",
      borderColor: "rgba(208,255,154,1)",
      fill: false,
      borderWidth : 15,
      pointRadius : 0,
      data: [
        {
          x: new Date(2009,01,01),
          y: 2                                                    
        }, {
            x: new Date(2012,09,01),
            y: 2                                                    
        }
      ]
    },
    {
      label: 'Label C',
      backgroundColor: "rgba(246,156,85,1)",
      borderColor: "rgba(246,156,85,1)",
      fill: false,
      borderWidth : 15,
      pointRadius : 0,
      data: [
        {
          x: new Date(2017,01,01),
          y: 1                                                    
        }, {
            x: new Date(2017,08,01),
            y: 1                                                    
        }
      ]
    },
  ]
};

var options = {
  maintainAspectRatio: false,
  legend : {
    display : true
  },
  scales: {
    xAxes: [{
      type: 'time',
      unit: 'month',
      unitStepSize: 1,
      time: {
        displayFormats: {
          'month': 'MM/YY',
          'quarter': 'MM/YY'
        }
      },
      position: 'bottom',
      ticks : {
        beginAtzero :true
      }},
            {
              type: 'time',
              unit: 'month',
              unitStepSize: 1,
              time: {
                displayFormats: {
                  'month': 'MM/YY',
                  'quarter': 'MM/YY'
                }
              },
              position: 'top',
              ticks : {
                beginAtzero :true
              }
            }],
    yAxes : [{
      display: false,
      scaleLabel : {
        display : false
      },
      ticks : {
        beginAtZero :true,
        max : 5
      }
    }]
  },
  tooltips: {
    enabled: true,
    mode: 'label',
  },
};

var scatterChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});

Answer 1

我必须将intersect: false属性添加到工具提示

Updated JSFiddle

工具提示代码：

  tooltips: {
    enabled: true,
    intersect: false,
    titleFontSize: 0,
    callbacks: {
      label: function(tooltipItems, data) {
        return data.datasets[tooltipItems.datasetIndex].label || 'Other';
      },
    }
  }

Chart JS 2.x：如何在时间线图表中显示工具提示？

1 个答案: