Question

我尝试使用小提琴Code to use a CategoryFilter as a column selector by Andrew Gallant在Google Charts-LineChart中创建一个CategoryFilter。

我得到的错误是： “一个或多个参与者未能画出（）”＆amp; “无效的列标签：colLabel”

除了在小提琴中，我从ASP.NET中的SQL-Connection获取我的图表数据。

出了什么问题？

重要的javascript函数如下所示：

public class Grid extends JPanel implements ActionListener{
    JButton[][] buttons;
    public Grid (String title){
       setLayout(null);
       setSize(295,295);
       setLocation(10,10);
       buttons = new JButton[5][5];
       for(int row=0; row<5; row++) {
          for(int col=0; col<5; col++) {
              buttons[row][col] = new JButton();
              buttons[row][col].setLocation(5+col*55, 5+row*55);
              buttons[row][col].setSize(50,50);
              buttons[row][col].addActionListener(this);
              add(buttons[row][col]);
          }
       }
   }    @Override
    public void actionPerformed(ActionEvent e)
    {
    // TODO Auto-generated method stub

    }
}

提供如下数据的C＃代码：

function drawchart(chartData) {

        var data = new google.visualization.DataTable();
        for (var index in chartData.Columns) {
            data.addColumn('number', chartData.Columns[index]);
        }
        data.addRows(chartData.Data);

        var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));

        var chart = new google.visualization.ChartWrapper({
            chartType: 'LineChart',
            containerId: 'chart_div',
            dataTable: data,
        });

        var columnsTable = new google.visualization.DataTable();

        columnsTable.addColumn('number', 'colIndex');
        columnsTable.addColumn('string', 'colLabel');

        var initState = {
            selectedValues: []
        };

        for (var i = 1; i < data.getNumberOfColumns() ; i++) {
            columnsTable.addRow([i, data.getColumnLabel(i)]);

            initState.selectedValues.push(data.getColumnLabel(i));
        }

        var distributors = new google.visualization.ControlWrapper({
            controlType: 'CategoryFilter',
            containerId: 'distributors_div',
            dataTable: columnsTable,
            options: {
                filterColumnLabel: 'colLabel',
                ui: {
                    label: 'Columns',
                    allowTyping: false,
                    allowMultiple: true,
                    allowNone: false,
                    selectedValuesLayout: 'belowStacked'
                }
            },
            state: initState
        });

        function setChartView(wrapper) {

            wrapper.setOption('height', 720);
            wrapper.setOption('width', 1280);

            var state = distributors.getState();
            var row;
            var view = {
                columns: [0]
            };
            for (var i = 0; i < state.selectedValues.length; i++) {
                row = columnsTable.getFilteredRows([{
                    column: 1,
                    value: state.selectedValues[i]
                }])[0];
                view.columns.push(columnsTable.getValue(row, 0));
            }
            // sort the indices into their original order
            view.columns.sort(function (a, b) {
                return (a - b);
            });
            chart.setView(view);
            chart.draw();
        }



        google.visualization.events.addListener(distributors, 'statechange', setChartView);


        setChartView(chart);

        dash.bind(distributors, chart);
        dash.draw(data);

    }

Answer 1

首先，Gallant示例不使用仪表板每个控件都是单独绘制的。

使用信息中心将覆盖图表＆amp;中的dataTable定义。控制包装。
在这里将它们设置为相同的DataTable - ＆gt; dash.draw(data);
从而导致 - ＆gt; Invalid column label:colLabel

此外，ControlWrapper上的'statechange'事件不会将任何参数传递给回调函数。
从事件中调用时，wrapper的{{1}}参数将不存在...

最后，虽然问题没有显示，但我建议loading Google Charts 使用setChartView与loader.js

由于recent problems

，将jsapi替换为版本'current'

Google图表：列标签无效|类别筛选为列选择器

1 个答案: