在chartjs

2024-05-19 • 问答

我正在尝试创建一个{1}得分为1-100的得分。

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

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

这是预期的结果。

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,tooltips: {
                          mode: 'intersect'
                       },scales: {
                          xAxes: [{
                             type: 'linear',ticks: {
                                min: 0,//minimum tick
                                max: 100,//maximum tick
                             },yAxes: [{
                             ticks: {
                                bezierCurve : true,min: 0,bezierCurve : true,type: 'linear',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;

并在chartJs代码中包含动态值

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

const lineData = [
         { x: 0,];

      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'),}
                          }]
                       }
                    }
                 })

<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

shuiyezhu 回答：在chartjs

大家都在问