自定义事件和注释的竖线

Question

我有一个显示趋势的图表。我需要添加自定义垂直线来表示在报告期间发生的一些事件。这可以帮助我了解那些事件和趋势变化（如果有）之间的联系。

示例：请参阅中间的消息气泡和虚线（单击以获取更高的分辨率）。

检查了最新的docs和samples，但找不到合适的内容。

从我头上的几个想法：

• [Place very narrow bar charts，与主数据分开，在同一画布上
• 使用JavaScript计算画布大小并在其上手动放置自定义垂直线

两者听起来都像解决方法，我想知道是否有更好的方法。谢谢。

Answer 1

您可以使用canvas直接在Plugin Core API上绘制自己的线条。它提供了可用于执行自定义代码的不同钩子。在下面的代码片段中，我使用afterDraw钩从dataset中的点绘制虚线，每个点分别代表一个事件。

可以使用canvas在CanvasRenderingContext2D.drawImage()上绘制消息提示框。

const labels = ['2020-02-06', '2020-02-07', '2020-02-08', '2020-02-09', '2020-02-10', '2020-02-11', '2020-02-12'];
const events = ['2020-02-08', '2020-02-10'];
const values = [75, 56, 33, 44, 71, 62, 24];

var icon = new Image(20, 20);
icon.src = 'https://i.stack.imgur.com/EXAgg.png';

new Chart(document.getElementById("myChart"), {
  type: "line",
  plugins: [{
    afterDraw: chart => {      
      var ctx = chart.chart.ctx; 
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0'];
      xAxis.ticks.forEach((value, index) => {         
         if (events.includes(labels[index])) {
           var x = xAxis.getPixelForTick(index);           
           ctx.save();
           ctx.setLineDash([10, 5]);
           ctx.strokeStyle = '#888888';
           ctx.beginPath();
           ctx.moveTo(x, yAxis.bottom);             
           ctx.lineTo(x, yAxis.top);
           ctx.stroke();
           ctx.restore();
           ctx.drawImage(icon, x - 12, yAxis.bottom - 15);
         }
      });      
    }
  }],
  data: {
    labels: labels,
    datasets: [{
      label: 'My Dataset',
      data: values,
      fill: false,
      backgroundColor: 'green',
      borderColor: 'green'
    }]
  },
  options: {
    responsive: true,
    title: {
      display: false
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{        
        ticks: {
          beginAtZero: true,
          stepSize: 20
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day',
          tooltipFormat: 'MMM DD'
        },
        gridLines: {
          display: false
        }        
      }],
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="90"></canvas>