Google图表ChartWrapper获取无效列索引 [英] Google chart ChartWrapper getting invalid column index

查看：163
本文介绍了Google图表ChartWrapper获取无效列索引的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经按照google图表教程制作了一个ControlWrapper驱动器的两个图表，我已经准备了一个包含4列的数据集： 

  data = new google.visualization.DataTable（）; 
 data.addColumn（'datetime'，'Time'）; 
 data.addColumn（'number'，'col1'）; 
 data.addColumn（'number'，'col2'）; 
 data.addColumn（'number'，'col3'）;

然后我用ChartWrapper设置了两个图表：

  chart = new google.visualization.ChartWrapper（{$ b $'chartType'：'LineChart'，
'containerId'：'chart1div'，
'options'：{
 title：'Chart1'，
 curveType：'function'，
 legend：{position：'bottom'}，
 pointSize：5，
动画：{
 duration：1000，
 easing：'out'，
startup：true 
}，
'chartArea'：{'height '：'90％'，'width'：'90％'}，
 hAxis：{
 gridlines：{
 count：-1，
 units：{
天：{格式：['MMM dd']}，
小时：{格式：['HH：mm'，'ha']}，
} 
 }，
'slantedText'：false，
 minorGridlines：{
 units：{
 hours：{format：['hh：mm：ss a'，'ha']} ，
分钟：{格式：['HH：mm a Z'，'：mm']} 
} 
} 
}，
 vAxis：{
 gridlines：{color：'none'}，
 minValue：0 
} 
}，
'view'：{'columns'：[0，1]} 
}）; 
 $ b $ chart2 = new google.visualization.ChartWrapper（{
'chartType'：'LineChart'，
'containerId'：'chart2div'，
'options'： {
 title：'chart2'，
 curveType：'function'，
 legend：{position：'bottom'}，
 pointSize：5，
 animation：{ 
 duration：1000，
 easing：'out'，
startup：true 
}，
'chartArea'：{'height'：'90％' ，'width'：'90％'}，
 hAxis：{
 gridlines：{
 count：-1，
 units：{
 days：{format： ['MMM dd']}，
 hours：{format：['HH：mm'，'ha']}，
} 
}，
'slantedText'：false ，
 minorGridlines：{
单位：{
小时：{格式：['hh：mm：ss a'，'ha']}，
分钟：{格式：['HH：mm a Z'，'：mm ']} 
} 
} 
}，
 vAxis：{
 gridlines：{color：'none'}，
 minValue：0 
} 
}，
'view'：{'columns'：[0,2]} 
}）;

然后： 

  timeRangeSlider = new google.visualization.ControlWrapper（{$ b $'controlType'：'ChartRangeFilter'，
'containerId'：'filter_div'，
'options'：{
 $ b'filterColumnIndex'：0，
'ui'：{$ b $'chartType'：'LineChart'，
'chartOptions'：{ 
'curveType'：'function'，
'chartArea'：{'width'：'90％'}，
 //'hAxis'：{'baselineColor'：'none'} 
'hAxis'：{
 gridlines：{
 count：-1，
 units：{
 days：{format：['MMM dd']}，
小时数：{格式：['HH：mm'，'ha']}，
} 
}，
'slantedText'：false，
 minorGridlines：{
单位：{
 hours：{格式：['hh：mm：ss a'，'ha']}，
分钟：{格式：['HH：mm a Z'，'：mm' ]} 
} 
} 
} 
}，
'chartView'：{
'columns'：[0，1，2，3] 
}，
'minRangeSize'：43200000 
} 
} 
}）; 
 dashboard = new google.visualization.Dashboard（document.getElementById（'dashboard_div'））; 
 dashboard.bind（timeRangeSlider，[chart，chart2]）; 
 dashboard.draw（data）;

但是我得到列索引无效2.应该是一个整数第二个图表的范围[0-1] ，我不知道为什么，因为在数据集中有4列，所以必须存在列索引2！



任何人都经历过这样的事情？解析方案

使用视图与动画结合在启动



删除启动：true 并且不会发生错误



请参阅以下工作片段...



data-console =truedata-babel =false>

< script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =dashboard_div> < div id =chart1div>< / div> < div id =chart2div>< / div> < div id =filter_div>< / div>< / div>

I've followed the google chart tutorial to make a ControlWrapper drive two charts, I've prepared a dataset with 4 columns:

data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'col1');
data.addColumn('number', 'col2');
data.addColumn('number', 'col3');

then I've setup the two charts with ChartWrapper:

chart = new google.visualization.ChartWrapper({
     'chartType': 'LineChart',
      'containerId': 'chart1div',
      'options': {
            title: 'Chart1',
            curveType: 'function',
            legend: { position: 'bottom' },
            pointSize: 5,
            animation:{
                duration: 1000,
                easing: 'out',
                "startup": true
            },
            'chartArea': {'height': '90%', 'width': '90%'},
            hAxis: {
                gridlines: {
                    count: -1,
                    units: {
                        days: {format: ['MMM dd']},
                        hours: {format: ['HH:mm', 'ha']},
                    }
                },
                'slantedText': false,
                minorGridlines: {
                    units: {
                        hours: {format: ['hh:mm:ss a', 'ha']},
                        minutes: {format: ['HH:mm a Z', ':mm']}
                    }
                }
            },
            vAxis: {
                gridlines: {color: 'none'},
                minValue: 0
            }
      },
      'view': {'columns': [0, 1]}
    });

    chart2 = new google.visualization.ChartWrapper({
      'chartType': 'LineChart',
      'containerId': 'chart2div',
      'options': {
            title: 'chart2',
            curveType: 'function',
            legend: { position: 'bottom' },
            pointSize: 5,
            animation:{
                duration: 1000,
                easing: 'out',
                "startup": true
            },
            'chartArea': {'height': '90%', 'width': '90%'},
            hAxis: {
                gridlines: {
                    count: -1,
                    units: {
                        days: {format: ['MMM dd']},
                        hours: {format: ['HH:mm', 'ha']},
                    }
                },
                'slantedText': false,
                minorGridlines: {
                    units: {
                        hours: {format: ['hh:mm:ss a', 'ha']},
                        minutes: {format: ['HH:mm a Z', ':mm']}
                    }
                }
            },
            vAxis: {
                gridlines: {color: 'none'},
                minValue: 0
            }
      },
      'view': {'columns': [0,2]}
    });

Then:

timeRangeSlider = new google.visualization.ControlWrapper({
            'controlType': 'ChartRangeFilter',
            'containerId': 'filter_div',
            'options': {
                // Filter by the date axis.
                'filterColumnIndex': 0,
                'ui': {
                    'chartType': 'LineChart',
                    'chartOptions': {
                        'curveType': 'function',
                        'chartArea': {'width': '90%'},
                        //'hAxis': {'baselineColor': 'none'}
                        'hAxis': {
                            gridlines: {
                                count: -1,
                                units: {
                                    days: {format: ['MMM dd']},
                                    hours: {format: ['HH:mm', 'ha']},
                                }
                            },
                            'slantedText': false,
                            minorGridlines: {
                                units: {
                                    hours: {format: ['hh:mm:ss a', 'ha']},
                                    minutes: {format: ['HH:mm a Z', ':mm']}
                                }
                            }
                        }
                    },
                    'chartView': {
                        'columns': [0, 1, 2, 3]
                    },
                    'minRangeSize': 43200000
                }
            }
        });    
    dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));    
    dashboard.bind(timeRangeSlider, [chart, chart2]);
    dashboard.draw(data);

But I'm getting Invalid column index 2. Should be an integer in the range [0-1] for the second chart and I don't know why, because in the dataset there are 4 columns so there must exists a column index 2!

Anyone have experienced something like this?

解决方案

it's a bug when using a view combined with animation on startup

remove "startup": true and the error doesn't occur

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart', 'controls']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Time');
  data.addColumn('number', 'col1');
  data.addColumn('number', 'col2');
  data.addColumn('number', 'col3');

  for (var i= 0; i < 10; i++) {
    data.addRow([
      new Date(2017, 0, 6, (i + 1)),
      i * 1,
      i * 2,
      i * 3,
    ]);
  }

  chart = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart1div',
    'options': {
        title: 'Chart1',
        curveType: 'function',
        legend: { position: 'bottom' },
        pointSize: 5,
        animation:{
            duration: 1000,
            easing: 'out',
            "startup": true
        },
        'chartArea': {'height': '90%', 'width': '90%'},
        hAxis: {
            gridlines: {
                count: -1,
                units: {
                    days: {format: ['MMM dd']},
                    hours: {format: ['HH:mm', 'ha']},
                }
            },
            'slantedText': false,
            minorGridlines: {
                units: {
                    hours: {format: ['hh:mm:ss a', 'ha']},
                    minutes: {format: ['HH:mm a Z', ':mm']}
                }
            }
        },
        vAxis: {
            gridlines: {color: 'none'},
            minValue: 0
        }
      },
      'view': {'columns': [0, 1]}
    });

    chart2 = new google.visualization.ChartWrapper({
      'chartType': 'LineChart',
      'containerId': 'chart2div',
      dataTable: data,
      'options': {
          title: 'chart2',
          curveType: 'function',
          legend: { position: 'bottom' },
          pointSize: 5,
          animation:{
              duration: 1000,
              easing: 'out'
          },
          'chartArea': {'height': '90%', 'width': '90%'},
          hAxis: {
              gridlines: {
                  count: -1,
                  units: {
                      days: {format: ['MMM dd']},
                      hours: {format: ['HH:mm', 'ha']},
                  }
              },
              'slantedText': false,
              minorGridlines: {
                  units: {
                      hours: {format: ['hh:mm:ss a', 'ha']},
                      minutes: {format: ['HH:mm a Z', ':mm']}
                  }
              }
          },
          vAxis: {
              gridlines: {color: 'none'},
              minValue: 0
          }
      },
      'view': {'columns': [0, 2]}
    });
    chart2.draw();
    timeRangeSlider = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'filter_div',
        'options': {
            // Filter by the date axis.
            'filterColumnIndex': 0,
            'ui': {
                'chartType': 'LineChart',
                'chartOptions': {
                    'curveType': 'function',
                    'chartArea': {'width': '90%'},
                    //'hAxis': {'baselineColor': 'none'}
                    'hAxis': {
                        gridlines: {
                            count: -1,
                            units: {
                                days: {format: ['MMM dd']},
                                hours: {format: ['HH:mm', 'ha']},
                            }
                        },
                        'slantedText': false,
                        minorGridlines: {
                            units: {
                                hours: {format: ['hh:mm:ss a', 'ha']},
                                minutes: {format: ['HH:mm a Z', ':mm']}
                            }
                        }
                    }
                },
                'chartView': {
                    'columns': [0, 1, 2, 3]
                },
                'minRangeSize': 43200000
            }
        }
    });

    dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
    dashboard.bind(timeRangeSlider, [chart]);
    dashboard.draw(data);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div id="chart1div"></div>
  <div id="chart2div"></div>
  <div id="filter_div"></div>
</div>

这篇关于Google图表ChartWrapper获取无效列索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆