Question

我正在为chart.js中的每个Chart类型创建一个样本中的React Component。大部分工作都很好。但是，我遇到了第一个障碍，因为我记得你可以在一个图表中拥有多个数据集。

我有条形图的以下代码

export class Bar extends React.Component<IBarProps, {}> {
  constructor(props: IBarProps) {
    super(props)
  }

  public render() {
    const className = classNames('bar-chart', this.props.className)
    const ctx = document.getElementById('bar-chart') as HTMLCanvasElement

    let bar: Chart = new Chart(ctx, {
      type: this.props.horizontal ? 'horizontalBar' : 'bar',
      data: {
        labels: this.props.labels,
        datasets: [
          {
            label: this.props.label,
            xAxisID: this.props.xAxisID,
            yAxisID: this.props.yAxisID,
            backgroundColor: this.props.backgroundColor,
            borderColor: this.props.borderColor,
            borderWidth: this.props.borderWidth
          }
        ]
      } as ChartData,
      options: {
        elements: { rectangle: { borderSkipped: this.props.borderSkipped } }
      }
    })

    bar.update()
    return (
      <div className={className}>
        <canvas
          id="bar-chart"
          width={this.props.width ? this.props.width : '400'}
          height={this.props.height ? this.props.height : '400'}
        />
      </div>
    )
  }
  // private push() {
  //   const dataSets = this.props.dataSets
  //   dataSets.forEach(dataSet => {new Object(label: this.props.label,)})

  //   return dataSets
  // }
}

问题在于我设置它的方式，它只支持单个数据集。我需要的是，对于定义的每个数据集，为其创建一个对象并将其推入数据集数组。但是，我不是Javascript专家，也不是打字稿专家。

有人能告诉我如何设置动态数据集数组吗？如果您需要更多信息，请参阅Bar Chart Docs

Chart.js中的动态数据集

0 个答案: