如何在reactjs中使用chartist中的堆栈栏？

Question

我指的是图表文档 - ＆gt; https://gionkunz.github.io/chartist-js/examples.html#stacked-bar

我已经看到上面链接中的代码，所以我试图在react组件中实现它。

chart.js之：

import React, { Component } from 'react';
import ChartistGraph from "react-chartist";

const simpleChartData = {
          labels: ['Q1', 'Q2', 'Q3', 'Q4'],
          series: [
            [800000, 1200000, 1400000, 1300000],
            [200000, 400000, 500000, 300000],
            [100000, 200000, 400000, 600000]
          ],
        stackBars: true
}

class Chart extends Component {

  render(){
    return(
      <div>
            <ChartistGraph data={simpleChartData} type={'Bar'} /> 
      </div>

    )}

}

export default Chart;

我没有得到堆积条形图而是获得简单的条形图。见截图：

Answer 1

尝试将stackBars: true放入ChartistGraph

的options属性中

import React, { Component } from 'react';
import ChartistGraph from "react-chartist";

const simpleChartData = {
          labels: ['Q1', 'Q2', 'Q3', 'Q4'],
          series: [
            [800000, 1200000, 1400000, 1300000],
            [200000, 400000, 500000, 300000],
            [100000, 200000, 400000, 600000]
          ]

}

const options = {
     stackBars: true
}
class Chart extends Component {

  render(){
    return(
      <div>
            <ChartistGraph data={simpleChartData} options={options} type={'Bar'} /> 
      </div>

    )}

}

export default Chart;