如何呈现 ColumnChart 滑块

Question

我来这里是因为我正在为我的 dataviz 应用程序使用一些滑块。

我已经用滑块做了一个图表，它工作正常，但现在我想用 ColumnChart 而不是 LineChart 做同样的事情...:[=16=]

这是工作代码：

        width={"100%"}
        chartType="LineChart"
        loader={<div>Loading Chart</div>}
        
        data={[
          ["Date", "Value"],
         
          [new Date(2000, 11, 26), 13],
          [new Date(2000, 11, 27), 50],
          [new Date(2000, 11, 28), 32],
         //there is very much lines here but for simplicity i removed them
        ]}
        options={{
          // Use the same chart area width as the control for axis alignment.
          interpolateNulls: false,
          chartArea: { height: "80%", width: "90%" },
          hAxis: { slantedText: false },
          vAxis: { viewWindow: { min: 0, max: 55 } },
          legend: { position: "none" },
          colors: ['#f6c7b6']
        }}
       
        rootProps={{ "data-testid": "0" }}
        chartPackages={["corechart", "controls"]}
        controls={[
          {
            controlType: "ChartRangeFilter",
            options: {
                
              filterColumnIndex: 0,
              ui: {
                chartType: "LineChart",
                chartOptions: {
                  chartArea: { width: "90%", height: "50%" },
                  hAxis: { baselineColor: "none" },
                  colors: ['green'],
                },
              },
            },
            controlPosition: "bottom",
            controlWrapperParams: {
              state: {
                range: {
                  start: new Date(2000, 1, 1),
                  end: new Date(2000, 4, 6),
                },
              },
            },
          },
        ]}
      />

结果如下：Here is the result

现在我想要相同的数据，但使用 ColumnChart，我做到了：

<Chart
    width={"100%"}
    chartType="ColumnChart"
    loader={<div>Loading Chart</div>}
    data={[
      ["Date", "Value"],

      
      [new Date(2000, 11, 11), 32],
      [new Date(2000, 11, 12), 5],
      [new Date(2000, 11, 13), 46],
      [new Date(2000, 11, 14), 31],
      [new Date(2000, 11, 15), 17],
      [new Date(2000, 11, 16), 17],
      [new Date(2000, 11, 17), 6],
      [new Date(2000, 11, 18), 43],
      [new Date(2000, 11, 19), 11],
      [new Date(2000, 11, 20), 44],
      [new Date(2000, 11, 21), 44],
      [new Date(2000, 11, 22), 37],
      [new Date(2000, 11, 23), 43],
      [new Date(2000, 11, 24), 26],
      [new Date(2000, 11, 25), 13],
      [new Date(2000, 11, 26), 50],
      [new Date(2000, 11, 27), 32],
      [new Date(2000, 11, 28), 25],
    ]}
    options={{
      // Use the same chart area width as the control for axis alignment.
      interpolateNulls: false,
      chartArea: { height: "80%", width: "90%" },
      hAxis: { slantedText: false },
      // vAxis: { viewWindow: { min: 0, max: 55 } },
      legend: { position: "none" },
      is3D: true,
      colors: ['orange'],
      
    }}
    rootProps={{ "data-testid": "1" }}
    chartPackages={["corechart", "controls"]}
    
    /*
    controls={[
      {
        controlType: "ChartRangeFilter",
        options: {
          filterColumnIndex: 0,
          ui: {
            chartType: "ColumnChart",
            chartOptions: {
              chartArea: { width: "90%", height: "50%" },
              hAxis: { baselineColor: "none" },
            },
          },
        },
        controlPosition: "bottom",
        controlWrapperParams: {
          state: {
            range: {
              start: new Date(2000, 11, 1),
              end: new Date(2000, 11, 6),
            },
          },
        },
      },
    ]}
    */
    
  />

And the result

但是当我取消注释时间滑块的代码时，我得到了一个奇怪的结果:

weirdResult

我错过了什么？我怎样才能拥有与 ColumnChart 相同类型的滑块？

感谢您的帮助！

我正在使用 React 和 React google Chart，它是 Google 图表

的包装器

Answer 1

如 ChartRangeFilter、
的参考文献中所述 ColumnChart 不是有效的图表类型（参见选项 --> ui.chartType）

请尝试使用 ComboChart，
并将 seriesType 图表选项设置为 bars

请参阅以下代码片段...

controls={[
  {
    controlType: "ChartRangeFilter",
    options: {
      filterColumnIndex: 0,
      ui: {
        chartType: "ComboChart",  // <-- use ComboChart
        chartOptions: {
          chartArea: { width: "90%", height: "50%" },
          hAxis: { baselineColor: "none" },
          seriesType: "bars",  // <-- set series type
        },
      },
    },
    controlPosition: "bottom",
    controlWrapperParams: {
      state: {
        range: {
          start: new Date(2000, 11, 1),
          end: new Date(2000, 11, 6),
        },
      },
    },
  },
]}

如何呈现 ColumnChart 滑块

How can I render a ColumnChart slider

javascript

reactjs

google-visualization

data-visualization

react-google-charts