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

Question

我正在尝试创建一个line chart，其得分等级为1-100。

线是静态，需要弯曲但是图表上的圆点是动态值，因此可以更改其沿现有线的位置。

[首先，我想添加仅代表点本身的其他数据，但是Y(height)未知。第二次尝试使我创建了第二条线，该线crosss / intersects第一条线，希望找到相交点并将其设为点。不幸的是，我找不到找到交叉点的方法。

这是预期的结果。

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

3
投票

您能否尝试创建动态值

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

问题描述投票：4回答：1

1个回答

最新问题

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

问题描述 投票：4回答：1

1个回答

最新问题

问题描述投票：4回答：1