单个HTML页面上有多个google.visualization.ChartEditor

时间:2018-06-09 16:54:06

标签: javascript google-visualization

我想在一个HTML页面上绘制更多的ChartEditor。例如,当对话框打开两个图表时,它们不包含编辑它们的选项。有人可以帮我这个吗?

我正在使用下面附带的代码:

<body>
<div id="vis_div" style="height: 400px; width: 600px;"></div>
<div id="vis_div2" style="height: 400px; width: 600px;"></div>
<script type="text/javascript">
  google.charts.load('visualization','1.0',{packages: ['charteditor'], callback: loadEditorBar});
  var chartEditor = null;

  function loadEditorBar() {
    // Create the chart to edit.
    var wrapperBar = new google.visualization.ChartWrapper({
        chartType: 'BarChart',
        dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                    ['', 700, 300, 400, 500, 600, 800]],
        options: {'title': 'Countries'},
        containerId: 'vis_div'
    });

    chartEditor = new google.visualization.ChartEditor();
    google.visualization.events.addListener(chartEditor, 'ok', redrawChartBar);
    chartEditor.openDialog(wrapperBar, {});
  }

  // On "OK" save the chart to a <div> on the page.
  function redrawChartBar(){
    chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
  }

</script>
<script type="text/javascript">
  google.charts.load('visualization','1.0',{packages: ['charteditor'], callback: loadEditor});
  var chartEditor2 = null;

  function loadEditor() {
    // Create the chart to edit.
    var wrapper = new google.visualization.ChartWrapper({
        chartType: 'AreaChart',
        dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                    ['', 700, 300, 400, 500, 600, 800]],
        options: {'title': 'Countries'},
        containerId: 'vis_div2'
    });

    chartEditor2 = new google.visualization.ChartEditor();
    google.visualization.events.addListener(chartEditor2, 'ok', redrawChartArea);
    chartEditor2.openDialog(wrapper, {});
  }

  // On "OK" save the chart to a <div> on the page.
  function redrawChartArea(){
    chartEditor2.getChartWrapper().draw(document.getElementById('vis_div2'));
  }

</script>
</body>

0 个答案:

没有答案