Question

我正在使用Google Charts API做一个项目，以便在可点击的Tab-Panel内制作一些柱形图。

我通过单击面板链接使用以下jQuery-Event创建Google图表。然后计算div的大小并绘制图表。

$('.tab_link').click(function(){
   drawChart(get_Div_Size().width, get_Div_Size().height);
});

该图表的代码为：

        var data = google.visualization.arrayToDataTable([
        ['Geschlecht', 'Wert', { role: 'style' }, {type: 'string', role: 'annotation'}],
        ['Männer', 12.5, "#AFDBF5", null],
        ['Frauen', 8.8, "#D8645B", null],
        ['Ihre Eingabe', UserValue, "#4c4c4c", annotation]
    ]);

    var options = {
        hAxis: {
            title: 'Vergleich'
          },
          vAxis: {
            gridlines: {color: '#333', count: 4},
            title: 'Distanz in Km',
        },
        legend: { position: "none" },
        width: width,
        height: height,
        title: 'Title',
        animation: {
            duration: 1500,
            startup: true
        }
    };




 chart = new google.visualization.ColumnChart(document.getElementById('chart-1'));
 chart.draw(data, options);

最初，图形呈现时没有这样的问题：

Graph without problems

如果我单击另一个面板，然后重新单击第一个面板，则缺少vAxis：

Graph missing vAxis

如果再次单击该面板链接，该图形将正确生成。

面板的标记结构：

            <div data-w-tab="Tab" class="tab_pane w-tab-pane w--tab-active">
          <div id="chart-1" class="chart_container"></div>
        </div>
        <div data-w-tab="Tab 2" class="tab_pane w-tab-pane">
          <div id="chart-2" class="chart_container"></div>
        </div>

在外观上，面板如下所示：

为什么vAxis第一次不可见？

首次点击时看不到Google Charts vAxis值

0 个答案: