如何在 React Google 图表中更改特定 targetAxisIndex 系列的格式 vAxis

Question

我想将类型行格式系列更改为百分比我尝试这个配置：

vAxis: {
  minValue: 0,
  maxValue: 1,
  gridlines: { count: 10 },
  minorGridlines: { count: 0 },
  // Format for targetAxisIndex 1
  1: {format: 'percent'},
}

它也不起作用我没有看到任何关于格式化的文档 targetAxisIndex

当前代码：

const chartData = [
    [
        "Test Product 003",
        20,
        "This",
        0.5
    ],
    [
        "Test Product 003",
        10,
        "This",
        0.75
    ],
    [
        "Campus Shirt",
        10,
        "This",
        1
    ]
]

  <Chart
    width={900}
    height={720}
    chartType="ComboChart"
    loader={<Spin />}
    data={[
      [
        '#',
        'Sales Quantity',
        { role: 'tooltip', type: 'string', p: { html: true } },
        'Cumulative Sales Quantity',
      ],
      ...chartData,
    ]}
    options={{
      series: {
        0: { type: 'bars' },
        1: {
          type: 'line',
          curveType: 'function',
          targetAxisIndex: 1,
        },
      },
      vAxis: {
        minValue: 0,
        maxValue: 1,
        gridlines: { count: 10 },
        minorGridlines: { count: 0 },
      },
      hAxis: {
        slantedText: true,
      },
      tooltip: { isHtml: true, trigger: 'visible' },
    }}
  />

这是sandbox

Answer 1

您可以使用 vAxes 选项来格式化特定的 y-axis。

vAxis 选项中的任何内容都将应用于所有 y-axis。

对于vAxes，使用索引号，其中0为左，1为右。

vAxis: {
  minValue: 0,
  maxValue: 1,
  gridlines: { count: 10 },
  minorGridlines: { count: 0 }
},
vAxes: {
  1: {
    format: 'percent'
  }
}

如何在 React Google 图表中更改特定 targetAxisIndex 系列的格式 vAxis

How do I change format vAxis for specific targetAxisIndex series in React Google Chart

javascript

charts

google-visualization

reactjs