【问题标题】:Why does the Chart Type of Google Chart change?为什么 Google Chart 的 Chart Type 会发生变化?
【发布时间】:2021-12-30 05:58:22
【问题描述】:

我想更新/修改现有的谷歌图表选项。假设我想通过单击按钮将新选项应用于现有图表。

单击“修改图表”按钮时,图表选项会更新(例如设置新颜色)。

奇怪的是图表类型从组合图变成了折线图。为什么会这样?即使我在选项中传递了chartType: 'ComboChart',图表类型仍然会改变。

非常感谢您的帮助。

function nuChart(d, t, a, h, x, y, st, is) {

    let obj = document.getElementById(d);
    if (obj == null) return;

    a = eval(a);

    if (a.length === 0) { return; }

    try {
        google.charts.load('current', { 'packages': ['corechart'] });
    } catch (error) {
        return;
    }

    google.charts.setOnLoadCallback(drawVisualization);

    if (a == '') { return; }

    function drawVisualization() {

        if (a === undefined) { return; }

        let data = google.visualization.arrayToDataTable(a);
        let wrapper = new google.visualization.ChartWrapper({

            chartType: t,
            dataTable: data,
            containerId: d,

            options: {
                title: h,
                vAxis: { title: y },
                hAxis: { title: x },
                seriesType: st,
                isStacked: is,
            }

        });

        wrapper.draw();

        window[d + '_wrapper'] = wrapper;

    }

}


function nuTestChart() {

    let a = [
                ['Month', 'Shane', 'Dave', 'Adam', 'Paul', 'Chris'],
                ['2019', 100, 200, 300, 400, 500],
                ['2020', 165, 238, 322, 498, 550],
                ['2021', 165, 938, 522, 998, 450],
                ['2022', 135, 1120, 599, 1268, 288]
              ];

    nuChart('google_chart', 'ComboChart', a, 'title', '', '', 'bars', false);

}

nuTestChart();

function nuModifyChart() {

  let wrapper = window["google_chart_wrapper"];

  wrapper.setOptions({
    colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
  });
  wrapper.draw();

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<button onclick="nuModifyChart()">Modify Chart</button>

<div id="google_chart" data-nu-tab="8" data-nu-form="" class="nuHtml" data-nu-access="0" style="top: 38px; width: 450px; height: 192px; position: absolute; visibility: visible;"></div>

【问题讨论】:

    标签: javascript html google-visualization


    【解决方案1】:

    图表类型没有改变,但系列类型(这仍然是一个谜) 在选项中再次设置“seriesType”,将修复它。

     wrapper.setOptions({
        colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
        ,seriesType: wrapper.m.seriesType
      });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-02-10
      • 2016-05-19
      • 1970-01-01
      • 2014-12-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多