首页 文章

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

提问于
浏览
0

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

它运作良好,但我可以't figure out how to show a tooltip when the mouse goes over a line. The information I want to show is the same shown in the labels (in the example below '标签A ', '标签B ' or '标签C' . 我试图添加工具提示选项 enabled = truemode = 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
});

1 回答

  • 0

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

    Updated JSFiddle

    工具提示代码:

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

相关问题