在chartjs中查找图表线之间的交点答案

【问题标题】：Find intersection between the chart lines in chartjs在chartjs中查找图表线之间的交点
【发布时间】：2019-11-28 10:16:48
【问题描述】：

我正在尝试创建一个 line chart，它显示从 1 到 100 的分数。

线是静态，需要弯曲
但是图表上的点是动态值，因此它会沿着现有线改变其位置。

首先，我想添加仅代表点本身的其他数据，但 Y(height) 是未知的。
第二次尝试使我创建了第二条线，与第一条线相交/相交，希望找到交点并使其成为一个点。
不幸的是，我找不到找到十字路口的方法。

这是预期的结果。

new Chart(
                 document.getElementById('lineChart'), {
                    type: 'line',
                    data: {
                       datasets: [
                          {
                             data: [
                                {
                                   x: 70, y: 0,
                                },
                                {
                                   x: 70, y: 100,
                             }],
                             fill: false,
                             borderColor: 'red',
                             showLine:true,
                          },
                          {
                             data:  [
                                {
                                   x: 0, y: 2,
                                },
                                {
                                   x: 25, y: 10,
                                },
                                {
                                   x: 50, y: 50,
                                },
                                {
                                   x: 80, y: 90,
                                },
                                {
                                   x: 100, y: 98,
                                }],
                             startWithZero: true,
                             fill:  false,
                             lineTension: 0.3,
                             borderColor: 'blue',
                          }
                       ]
                    },
                    options: {
                       bezierCurve : true,
                       lineTension: 0.3,
                       tooltips: {
                          mode: 'intersect'
                       },
                       scales: {
                          xAxes: [{
                             type: 'linear',
                             ticks: {
                                min: 0, //minimum tick
                                max: 100, //maximum tick
                             },
                          }],
                          yAxes: [{
                             ticks: {
                                bezierCurve : true,
                                min: 0, //minimum tick
                                max: 100, //maximum tick
                             },
                             bezierCurve : true,
                             type: 'linear',
                             lineTension: 0.3,
                             scaleLabel: {
                                lineTension: 0.1,
                                display: true,
                             }
                          }]
                       }
                    }
                 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<body>
    <div style="width: 750px; height: 250px; margin: 0 auto;">
            <canvas style="width: 750px; height: 250px" id="lineChart"></canvas>
        </div>
</body>

您可以检查 sn-p 以查看示例以及我走了多远。

【问题讨论】：

试试看这个Intersection point in line graph in Chart.js?
@codeNinja7 谢谢，我尝试使用它，但在我的案例中，图表有 X 和 Y 维度。我已经用一张我需要实现的图片更新了问题。

标签： javascript chart.js chartjs-2.6.0

【解决方案1】：

你能尝试创建动态值吗

       const lineData = [
         { x: 0, y: 2 },
         { x: 10, y: 3 },
         { x: 20, y: 10 },
         { x: 30, y: 20 },
         { x: 40, y: 35 },
         { x: 50, y: 50 },
         { x: 60, y: 65 },
         { x: 70, y: 80 },
         { x: 80, y: 90 },
         { x: 90, y: 97 },
         { x: 100, y: 98 },
      ];

      const xValue = 70;

      let key = Math.floor(xValue / 10);
      let diff = (lineData[key + 1].y - lineData[key].y) / 10;
      let toAdd = (xValue - lineData[key].x) * diff;
      const yValue = lineData[key].y + toAdd;

并在chartJs代码中包含动态值

         new Chart(
                 document.getElementById('lineChart'), {
                    type: 'line',
                    data: {
                       datasets: [
                          {
                             data: lineData,
                             startWithZero: true,
                             fill:  false,
                             lineTension: 0.3,
                             borderColor: 'blue',
                          }
                       ]
                    },
                    options: {
                       bezierCurve : true,
                       lineTension: 0.3,
                       tooltips: {
                          mode: 'intersect'
                       },
                       scales: {
                          xAxes: [{
                             type: 'linear',
                             ticks: {
                                min: 0, //minimum tick
                                max: 100, //maximum tick
                             },
                          }],
                          yAxes: [{
                             ticks: {
                                bezierCurve : true,
                                min: 0, //minimum tick
                                max: 100, //maximum tick
                             },
                             bezierCurve : true,
                             type: 'linear',
                             lineTension: 0.3,
                             scaleLabel: {
                                lineTension: 0.1,
                                display: true,
                             }
                          }]
                       }
                    }
                 })

const lineData = [
         { x: 0, y: 2 },
         { x: 10, y: 3 },
         { x: 20, y: 10 },
         { x: 30, y: 20 },
         { x: 40, y: 35 },
         { x: 50, y: 50 },
         { x: 60, y: 65 },
         { x: 70, y: 80 },
         { x: 80, y: 90 },
         { x: 90, y: 97 },
         { x: 100, y: 98 },
      ];

      const xValue = 70;

      let key = Math.floor(xValue / 10);
      let diff = (lineData[key + 1].y - lineData[key].y) / 10;
      let toAdd = (xValue - lineData[key].x) * diff;
      const yValue = lineData[key].y + toAdd;
      
      new Chart(
                 document.getElementById('lineChart'), {
                    type: 'line',
                    data: {
                       datasets: [
                          {
                             data: lineData,
                             startWithZero: true,
                             fill:  false,
                             lineTension: 0.3,
                             borderColor: 'blue',
                          }
                       ]
                    },
                    options: {
                       bezierCurve : true,
                       lineTension: 0.3,
                       tooltips: {
                          mode: 'intersect'
                       },
                       scales: {
                          xAxes: [{
                             type: 'linear',
                             ticks: {
                                min: 0, //minimum tick
                                max: 100, //maximum tick
                             },
                          }],
                          yAxes: [{
                             ticks: {
                                bezierCurve : true,
                                min: 0, //minimum tick
                                max: 100, //maximum tick
                             },
                             bezierCurve : true,
                             type: 'linear',
                             lineTension: 0.3,
                             scaleLabel: {
                                lineTension: 0.1,
                                display: true,
                             }
                          }]
                       }
                    }
                 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<body>
    <div style="width: 750px; height: 250px; margin: 0 auto;">
            <canvas style="width: 750px; height: 250px" id="lineChart"></canvas>
        </div>
</body>

【讨论】：

非常感谢，这正是我需要的！