Question

我正在使用react-google-charts文学作品，对于我的项目，我需要使用诸如chartType =“ BarChart”之类的垂直条。问题是我需要垂直放置。

我试图将“ bars：'vertical'”添加到选项中，并且在所有检查了没有组件的情况下构建图表的示例中，我都尝试过。我要用我从react组件中得到的东西。

这是我正在使用的样本。

https://react-google-charts.com/bar-chart#labeling-bars

<Chart
  width={'500px'}
  height={'300px'}
  chartType="BarChart"
  loader={<div>Loading Chart</div>}
  data={[
    [
      'Element',
      'Density',
      { role: 'style' },
      {
        sourceColumn: 0,
        role: 'annotation',
        type: 'string',
        calc: 'stringify',
      },
    ],
    ['Copper', 8.94, '#b87333', null],
    ['Silver', 10.49, 'silver', null],
    ['Gold', 19.3, 'gold', null],
    ['Platinum', 21.45, 'color: #e5e4e2', null],
  ]}
  options={{
    title: 'Density of Precious Metals, in g/cm^3',
    width: 600,
    height: 400,
    bar: { groupWidth: '95%' },
    legend: { position: 'none' },
  }}
/>

我在这里想念什么？

谢谢

Answer 1

尝试改用chartType="ColumnChart"。 example

<Chart
  width={'500px'}
  height={'300px'}
  chartType="ColumnChart"
  loader={<div>Loading Chart</div>}
  data={[
    [
      'Element',
      'Density',
      { role: 'style' },
      {
        sourceColumn: 0,
        role: 'annotation',
        type: 'string',
        calc: 'stringify',
      },
    ],
    ['Copper', 8.94, '#b87333', null],
    ['Silver', 10.49, 'silver', null],
    ['Gold', 19.3, 'gold', null],
    ['Platinum', 21.45, 'color: #e5e4e2', null],
  ]}
  options={{
    title: 'Density of Precious Metals, in g/cm^3',
    width: 600,
    height: 400,
    bar: { groupWidth: '95%' },
    legend: { position: 'none' },
  }}
/>

我如何在react-google-charts中使BarChart垂直

1 个答案: