如何在ChartJS中为条形设置不同的宽度?

时间:2018-08-27 06:10:44

标签: chart.js react-chartjs

我是React的新手,我想为条形设置不同的宽度,看起来像bar chart

我正在使用react-chartjs,但找不到解决方案。我当前的代码是:

const data = (canvas) => {
  const ctx = canvas.getContext("2d");
  return {
    labels: ['1', '2', '3', '4', '5', '6'],
    datasets: [
      {
        data: [
          {x:this.props.reliefZone1.startPosition,y:100},
          {x:this.props.reliefZone2.startPosition,y:100},
          {x:this.props.shockZone1.startPosition,y:100},
          {x:this.props.shockZone2.startPosition,y:100}
        ],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)'
        ]
      }
    ]
  }
};

const options = {
  responsive: true,
  scales: {
    xAxes: [{ 
      scaleLabel: {
        display: true,
        labelString: 'Years'
      },
    }],
    yAxes: [{
      display: true,
      ticks: {
        min: -100,
        max: 100
      }
    }]
  }
};

它看起来像:My chart

0 个答案:

没有答案