javascript - 如何使chartjs中的点可拖动？

问题

我希望在 0 到 100 之间可拖动的图形上获得 3 个点。我希望在 React 中通过 ChartJS 使用 react-chartjs-2 执行此操作。

Here is a fiddle 与所有设置(js 也在下面)。

额外信息

fiddle 使用了一些随机版本的 react-chartjs-2 因为我不知道如何导入。在我的本地设置中，我使用 import { Line } from 'react-chartjs-2'; 但我不确定如何在 jsfiddle 中做到这一点。 Webdev 对我来说是 super 新的。

到目前为止我尝试了什么？

我尝试使用一些声称的 chartjs 插件( like this one )
做可拖动的点，但我不知道如何获得它们
在 React 中工作。这可能是最简单的解决方案。

我尝试为 mouseDown/Up/Enter/Leave 添加我自己的事件监听器，
但我无法将这些附加到实际点上。如果我只有
访问 <Line /> 是否有一种方法可以让我在 React 中附加到
点自己？如果我能得到坐标并拥有这些
事件，我可以拼凑一个解决方案。

我尝试在 chartjs 和 react-chartjs-2 文档上搜索，但我
找不到任何可以让我拖动或附加正确的东西
听众。

代码

var Line = reactChartjs2.Line;

const options = {
  tooltips: {enabled: true},
  scales: {
    xAxes: [{
      gridLines: {display: false, color: 'grey',},
      ticks: {fontColor: '#3C3C3C', fontSize: 14,},
    }],
    yAxes: [{
      scaleLabel: {display: true, labelString: 'Color Strength', fontSize: 14,},
      ticks: {
        display: true,
        min: -5,
        max: 100,
        scaleSteps: 50,
        scaleStartValue: -50,
        maxTicksLimit: 4,
        fontColor: '#9B9B9B',
        padding: 30,
        callback: point => (point < 0 ? '' : point),
      },
      gridLines: {
        display: false,
        offsetGridLines: true,
        color: '3C3C3C',
        tickMarkLength: 4,
      },
    }],
  },
};

class DraggableGraph extends React.Component {
    state = {
    dataSet: [0, 0, 0],
    labels: ['red', 'green', 'blue'],
    };

    render() {
        const data = {
      labels: this.state.labels,
      datasets: [{
        data: this.state.dataSet,
        borderColor: '9B9B9B',
        borderWidth: 1,
        pointRadius: 10,
        pointHoverRadius: 10,
        pointBackgroundColor: '#609ACF',
        pointBorderWidth: 0,
        spanGaps: false,
      }],
    };

    return (
      <div>
        <Line
          data={data}
          options={options}
          legend={{display: false}}
          plugins={{}}
        />
      </div>
    );
  }
}

ReactDOM.render(<DraggableGraph />, document.getElementById('app'));

最佳答案

您可以使用 chartjs-plugin-dragData 来做到这一点。您必须在 选项 对象中设置 dragData: true 才能在图表 js 中使用此插件。在这里，我提供了更新的代码。

  var Line = reactChartjs2.Line;

const options = {
  tooltips: {enabled: true},
  scales: {
    xAxes: [{
      gridLines: {display: false, color: 'grey',},
      ticks: {fontColor: '#3C3C3C', fontSize: 14,},
    }],
    yAxes: [{
      scaleLabel: {display: true, labelString: 'Color Strength', fontSize: 14,},
      ticks: {
        display: true,
        min: -5,
        max: 100,
        scaleSteps: 50,
        scaleStartValue: -50,
        maxTicksLimit: 4,
        fontColor: '#9B9B9B',
        padding: 30,
        callback: point => (point < 0 ? '' : point),
      },
      gridLines: {
        display: false,
        offsetGridLines: true,
        color: '3C3C3C',
        tickMarkLength: 4,
      },
    }],
  },
  legend:{
  display: false
  },
  dragData: true,
  onDragStart: function (e) {
    console.log(e)
  },
  onDrag: function (e, datasetIndex, index, value) {
    console.log(datasetIndex, index, value)
  },
  onDragEnd: function (e, datasetIndex, index, value) {
    console.log(datasetIndex, index, value)
  }
};

class DraggableGraph extends React.Component {
    state = {
    dataSet: [0, 0, 0],
    labels: ['red', 'green', 'blue'],
    };

    render() {
        const data = {
      labels: this.state.labels,
      datasets: [{
        data: this.state.dataSet,
        borderColor: '9B9B9B',
        borderWidth: 1,
        pointRadius: 10,
        pointHoverRadius: 10,
        pointBackgroundColor: '#609ACF',
        pointBorderWidth: 0,
        spanGaps: false,
      }],
    };

    return (
      <div>
        <Line
          data={data}
          options={options}
        />
      </div>
    );
  }
}

ReactDOM.render(<DraggableGraph />, document.getElementById('app'));

https://jsfiddle.net/4mdenzjx/

关于javascript - 如何使chartjs中的点可拖动？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50393305/