需要自定义图形行为

Question

我正在使用chart.js库在我的angular 5应用程序中绘制带有两个系列的折线图。以下是我来自ts文件的代码：

this.myChart = new Chart(this.ctx, {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
        label: 'Data1',
        data: [100, 345, 657, 788, 300],
        fill: false,
        backgroundColor: '#3C96D2',
        pointRadius: 1,
        borderColor: '#3C96D2',
        pointHoverRadius: 3
      },
      {
        label: 'Data2',
        data: [567, 879, 200, 800],
        fill: false,
        backgroundColor: '#122449',
        pointRadius: 1,
        borderColor: '#122449',
        pointHoverRadius: 3
      }
    ]
  },
  options: {
    layout: {
      padding: {
        left: 50,
        right: 0,
        top: 0,
        bottom: 0
      }
    },
    hover: {
      mode: 'point',
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: false
        },
        scaleLabel: {
          display: true,
          labelString: 'prices'
        }
      }],
      xAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Year'
        }
      }],
    }
  }
});

它正确绘制了带有两个数据集的折线图。我想找出的是这两条线的交点，并在图形的该点显示一些自定义div。我也愿意使用其他任何插件。已经尝试使用amcharts，但未找到任何解决方案。非常感谢您的帮助。

Answer 1

使用贝塞尔曲线（lineTension !== 0）很难实现。您将需要花费一些时间来学习数学。

幸运的是，如果您不需要贝塞尔曲线，那么只有数据点之间的直线，StackOverflow上已经有了答案，right here!