如何在 reactjs 中使用来自 chartist 的堆栈条？

Question

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

我看过上面的代码link所以我想在反应组件中实现它。

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 的选项属性中：

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;

如何在 reactjs 中使用来自 chartist 的堆栈条？

How to use stack bars from chartist in reactjs?

javascript

reactjs

chartist.js