如何在一个页面上编辑两个Google图表中的一个?

时间:2016-03-21 10:37:14

标签: charts wrapper

我已将Google图表添加到我的页面。这将返回图表的图像。没关系。但我想只编辑其中一个,这就是问题所在。它只编辑第一个,但我想编辑,例如只编辑第二个。有谁能够帮我?这是我的代码:

//绘制图表

    google.charts.load('current', {'packages': ['corechart']});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = new google.visualization.DataTable();

            data.addColumn('string', 'Value');
            data.addColumn('number', 'Total count');
            data.addRows([
            ["A", 4],
            ["B", 1],
            ]);
                    var options = {
                        title: "Choose something"
                    };
            var chart = new google.visualization.PieChart(document.getElementById(304));

                    chart.draw(data, options);

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

            data305.addColumn('string', 'Value');
            data305.addColumn('number', 'Total count');
            data305.addRows([
            ["Male", 2],
            ["Female", 2],
            ]);
                    var options305 = {
                        title: "Gender"
                    };
            var chart305 = new google.visualization.PieChart(document.getElementById(305));

                    chart305.draw(data305, options305);

                }

//edit charts
google.load('visualization', '1.0', {packages: ['charteditor']});
    var chartEditor = null;

    function loadEditor() {

      // Create the chart to edit.
      var data = new google.visualization.DataTable();

            data.addColumn('string', 'Value');
            data.addColumn('number', 'Total count');
            data.addRows([
            ["A", 4],
            ["B", 1],
            ]);

      var wrapper = new google.visualization.ChartWrapper({
         chartType: 'PieChart',
             dataTable: data,
         options: {'title': 'Pohlavi'},
         containerId: '304'
      });

      chartEditor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
      chartEditor.openDialog(wrapper, {});
      //---------------------------------------
            // Create the chart to edit.
      var data305 = new google.visualization.DataTable();

            data305.addColumn('string', 'Value');
            data305.addColumn('number', 'Total count');
            data305.addRows([
            ["Male", 2],
            ["Female", 2],
            ]);

      var wrapper305 = new google.visualization.ChartWrapper({
         chartType: 'PieChart',
             dataTable: data,
         options: {'title': 'Pohlavi'},
         containerId: '305'
      });

      chartEditor305 = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor305, 'ok', redrawChart);
      chartEditor.openDialog(wrapper305, {});
    }

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(inputId){
      chartEditor.getChartWrapper().draw(document.getElementById(304));
    }
    function redrawChart305(inputId){
      chartEditor305.getChartWrapper().draw(document.getElementById(305));
    }

这里我enter code here是我的HTML:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

       <button onclick="loadEditor()">Click me</button>
       <div id="304" style="height: 400px; width: 600px;"></div>
       <button onclick="loadEditor()">Click me</button>
       <div id="305" style="height: 400px; width: 600px;"></div>
       <div id="vis_div" style="height: 400px; width: 600px;"></div>

哪里出错? 感谢

0 个答案:

没有答案