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

Question

我正在尝试创建一个 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>

您可以查看代码片段以查看示例以及我的进展情况。

Answer 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>

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

Find intersection between the chart lines in chartjs

javascript

chart.js

chartjs-2.6.0