0

演示链接：https ://codesandbox.io/s/tender-sun-p8ncv?file=/src/chartConfig.js

我想改变两个条之间的距离以及条的厚度。在阅读了谷歌文档后，我意识到你可以通过修改来调整两个条之间的间距，bar: { groupWidth: '60%' },但是如果你想固定单个条的大小，我不确定在那里使用什么。

这是我的配置：

export const chartConfig = {
  width: '35rem',
  height: '10rem',
  chartType: 'ComboChart',
  data: [
    ['Date', 'Reach', 'Cummilative Reach', { role: 'tooltip', type: 'string' }],
    [
      'July 12, 2021',
      938,
      614.6,
      'July 12, 2021 \nCumm Reach: 938, \nReach: 614',
    ],
    [
      'July 13, 2021',
      1120,
      682,
      'July 12, 2021 \nCumm Reach: 938, \nReach: 614',
    ],
    [
      'July 14, 2021',
      1167,
      623,
      'July 12, 2021 \nCumm Reach: 938, \nReach: 614',
    ],
    [
      'July 15, 2021',
      1110,
      609.4,
      'July 12, 2021 \nCumm Reach: 938, \nReach: 614',
    ],
    [
      'July 16, 2021',
      691,
      569.6,
      'July 12, 2021 \nCumm Reach: 938, \nReach: 614',
    ],
  ],

  options: {
    pointSize: 10,
    title: 'Reach and Cummilative Reach',
    tooltip: { isHtml: true },
    vAxis: { title: 'Reach (in Millions)' },
    hAxis: { title: 'Date' },
    seriesType: 'bars',
    backgroundColor: 'transparent',
    chartArea: { left: 20, top: 0, width: '50%', height: '75%' },
    bar: { groupWidth: '60%' },
    series: {
      0: { color: 'red' },
      1: {
        type: 'line',
        color: '#00B6CB',
        pointShape: 'circle',
      },
    },
  },

  rootProps: {
    'data-testid': '1',
  },
};

有谁知道如何调整条形宽度而不仅仅是条形之间的间距？

4

0 回答 0