javascript - 如何在reactjs中使用chartist的堆栈条？

Question

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

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

图表.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;