admin 管理员组

文章数量: 1086019

Question

I'm looking to make 3 points on a graph draggable between 0 and 100. I'm looking to do this in React with ChartJS via react-chartjs-2.

Here is a fiddle with everything setup (js also below).

Extra Info

The fiddle uses some random version of react-chartjs-2 because I couldn't figure out how to import. On my local setup I use import { Line } from 'react-chartjs-2'; but I'm not sure how to do that in jsfiddle. Webdev is super new to me.

What have I tried so far?

• I tried using a few chartjs plugins (like this one) that claimed to do draggable points, but I couldn't figure out how to get them working in React. This might be the easiest solutin.

• I tried adding my own event listeners for mouseDown/Up/Enter/Leave, but I was unable to attach these to the actual points. If I just have access to <Line /> is there a way in React for me to attach to the points themselves? If I could get the coordinates and have these events, I could kludge together a solution.

• I tried searching on the chartjs and react-chartjs-2 docs, but I couldn't find anything that would let me drag, or attach the right listeners.

Code

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'));

Question

I'm looking to make 3 points on a graph draggable between 0 and 100. I'm looking to do this in React with ChartJS via react-chartjs-2.

Here is a fiddle with everything setup (js also below).

Extra Info

The fiddle uses some random version of react-chartjs-2 because I couldn't figure out how to import. On my local setup I use import { Line } from 'react-chartjs-2'; but I'm not sure how to do that in jsfiddle. Webdev is super new to me.

What have I tried so far?

• I tried using a few chartjs plugins (like this one) that claimed to do draggable points, but I couldn't figure out how to get them working in React. This might be the easiest solutin.

• I tried adding my own event listeners for mouseDown/Up/Enter/Leave, but I was unable to attach these to the actual points. If I just have access to <Line /> is there a way in React for me to attach to the points themselves? If I could get the coordinates and have these events, I could kludge together a solution.

• I tried searching on the chartjs and react-chartjs-2 docs, but I couldn't find anything that would let me drag, or attach the right listeners.

Code

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'));

• javascript
• reactjs
• chart.js

Share Improve this question Follow asked May 17, 2018 at 13:55 ColtinColtin 3,79488 gold badges3333 silver badges4141 bronze badges 3

• 1 Have you tried using highcharts ? It has draggable plots chart.. example jsfiddle/highcharts/AyUbx/… or you can even check d3 chart - bl.ocks/denisemauldin/538bfab8378ac9c3a32187b4d7aed2c2 – Johnson Samuel Commented May 23, 2018 at 11:53
• Thanks for the suggestions @johnsam. Highcharts seems cost prohibitive so I think that's out, though it does look very nice. D3 chart doesn't seem all that different from implementing charts myself in React. Maybe I'll have to look at the example longer to see if I can easily make the graph nice. The Fiddle is a very cut down version of what I ultimately want and having to implement everything in D3 may be a pain pared to being able to make ChartJs draggable. – Coltin Commented May 23, 2018 at 17:25
• 1 I had a lot of difficulty with ChartJS (react-chartjs-2) and ended up moving over to CanvasJS. They have draggable features out-of-the-box: canvasjs./javascript-charts/interactive-draggable-chart – lux Commented May 24, 2018 at 15:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5 +50

You can do this by using chartjs-plugin-dragData. You have to set dragData: true within options object to use this plugin in chart js. Here I have provided updated code.

  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/4mdenzjx/

本文标签： javascriptHow to make points in chartjs draggableStack Overflow