如何使chartjs中的积分可拖动？

Question

问题

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

Here is a fiddle设置一切（js也在下面）。

额外信息

小提琴使用了一些随机版本的react-chartjs-2，因为我无法弄清楚如何导入。在我的本地设置中，我使用import { Line } from 'react-chartjs-2';，但我不确定如何在jsfiddle中执行此操作。 Webdev对我来说太新了。

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

• 我尝试使用声明的几个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'));

Answer 1

您可以使用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/