如何呈现 ColumnChart 滑块

问题描述

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

我已经做了一个带有滑块的图表并且它工作正常，但现在我想用 ColumnChart 而不是 LineChart 做同样的事情......：

这是工作代码：

        width={"100%"}
        chartType="LineChart"
        loader={<div>Loading Chart</div>}
        
        data={[
          ["Date","Value"],[new Date(2000,11,26),13],27),50],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",11),12),5],13),46],14),31],15),17],16),17),6],18),43],19),11],20),44],21),22),37],23),24),26],25),25],]}
    options={{
      // Use the same chart area width as the control for axis alignment.
      interpolateNulls: false,// vAxis: { viewWindow: { min: 0,is3D: true,colors: ['orange'],}}
    rootProps={{ "data-testid": "1" }}
    chartPackages={["corechart","controls"]}
    
    /*
    controls={[
      {
        controlType: "ChartRangeFilter",options: {
          filterColumnIndex: 0,ui: {
            chartType: "ColumnChart",chartOptions: {
              chartArea: { width: "90%",controlWrapperParams: {
          state: {
            range: {
              start: new Date(2000,]}
    */
    
  />

And the result

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

weirdResult

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

感谢您的帮助！

我正在使用 React 和 React google Chart，后者是 Google Chart 的包装器

解决方法

如 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,6),]}