在chartjs中计算直线上的点坐标？

3xiyfsfu 于 11个月前发布在 Chart.js

关注(0)|答案(1)|浏览(118)

在这个draggable ChartJS demo中，是否可以沿着ChartJS绘制的曲线之沿着导出一组插值坐标？

var options = {
      type: 'line',
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            fill: true,
            tension: 0.4,
            borderWidth: 1,
            pointHitRadius: 25
          },
          {
            label: '# of Points',
            data: [7, 11, 5, 8, 3, 7],
            fill: true,
            tension: 0.4,
            borderWidth: 1,
            pointHitRadius: 25
          }
        ]
      },
      options: {
        scales: {
          y: {
            min: 0,
            max: 20
          }
        },
        onHover: function(e) {
          const point = e.chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, false)
          if (point.length) e.native.target.style.cursor = 'grab'
          else e.native.target.style.cursor = 'default'
        },
        plugins: {
          dragData: {
            round: 1,
            showTooltip: true,
            onDragStart: function(e, datasetIndex, index, value) {
              // console.log(e)
            },
            onDrag: function(e, datasetIndex, index, value) {              
              e.target.style.cursor = 'grabbing'
              // console.log(e, datasetIndex, index, value)
            },
            onDragEnd: function(e, datasetIndex, index, value) {
              e.target.style.cursor = 'default' 
              // console.log(datasetIndex, index, value)
            },
          }
        }
      }
    }

    var ctx = document.getElementById('chartJSContainer').getContext('2d');
    window.test = new Chart(ctx, options);

个字符
演示程序绘制了一个5个值的数组。

data: [12, 19, 3, 5, 2, 3],

型
有没有一种方法可以使用JavaScript生成一个10个y值的数组，其中x坐标沿曲线均匀分布沿着？
例如，如果画布宽度为200px，则x坐标将以20px的值递增，y值将是贝塞尔曲线上的对应点。
I looked through the ChartJS API documentation，我没有看到一个API的贝塞尔曲线函数的每一个情节暴露，但也许有一种方法围绕这一点？

chart.js

来源：https://stackoverflow.com/questions/77760054/calculating-point-coordinates-on-a-line-in-chartjs

1条答案

按热度按时间

ttcibm8c1#

根据您想要使用的内容，一个简单的变通方法/解决方案是：

在labels属性中填入所需的正确数量的单位，例如["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Blue", "Yellow", "Green", "Purple", "Green"]
用一些空值填充数组 （整齐地间隔，你也可以用代码做到这一点），以匹配labels-数组的大小，如[7, null, 11, null, 5 , null, 8, null, 3, null, 7]
并使用spanGaps: true属性，以便chartjs将连接点。

像这样的chartjs，填补了空白，您可以在图表中留出空间，而无需手动计算任何额外的值。

小Demo：

var options = {
    type: 'line',
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Blue", "Yellow", "Green", "Purple", "Green"],
      datasets: [
        {
          label: '# of Points',
          data: [7, null, 11, null,  5 , null,  8, null,   3, null,  7],
          fill: true,
          tension: 0.4,
          borderWidth: 1,
          pointHitRadius: 25,
          spanGaps: true
        }
      ]
    },
    options: {
      scales: {
        y: {
          min: 0,
          max: 20
        }
      },
    }
  }

  let ctx = document.getElementById('chartJSContainer').getContext('2d');
  new Chart(ctx, options);

html, body { margin: 0; padding: 0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script>
<canvas id="chartJSContainer" style="height: 180px; width: 500px;"></canvas>

赞(0）回复(0）举报 11个月前

我来回答

在chartjs中计算直线上的点坐标？

1条答案

相关问题

热门标签

最新问答