【问题标题】:Google Chart not displaying correctly in Chart AreaGoogle 图表在图表区域中未正确显示
【发布时间】:2017-12-07 21:14:30
【问题描述】:

实际上,在使用动态数据实施时,我面临着与 Google 图表相关的问题。这里的问题当我单击一个选项卡时,必须在图表中显示特定数据。假设说单击当前日期在图表中显示以下结果

在按标签后说按上周后在图表区域中未正确显示图表

假设如果你再次按下 Current Day 字符会像这样显示

这里的图表区域在第一次单击和第二次单击后无法正常工作

`google.charts.load('current', { 'packages': ['bar'] });

$('#t1').click(function () {
    google.charts.setOnLoadCallback(BarC);
    function BarC() {

        var jsonData = $.ajax({
            type: 'GET',
            url: xxxx.xxxx.xxxx,

            dataType: 'json',

        }).done(function (results) {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'data1');
            data.addColumn('number', 'data2');
            data.addColumn('number', 'data3');
            data.addColumn('number', 'data4');

            data.addRows(results.length);
            for (i = 0; i < results.length; i++) {
                data.setValue(i, 0, results[i]["data1"]);
                data.setValue(i, 1, parseInt(results[i]["data2"]));
                data.setValue(i, 2, parseInt(results[i]["data3"]));
                data.setValue(i, 3, parseInt(results[i]["data4]));
            }

            var options = {

                backgroundColor: 'transparent',

                bars: 'vertical',
                chartArea: { left: 0, top: 0, width: '100%', height: '100%' }// Required for Material Bar Charts.
            };

            var chart = new google.charts.Bar(document.getElementById('chart'));
           chart.draw(data, google.charts.Bar.convertOptions(options));
        }
        );
    }

});`

【问题讨论】:

标签: javascript jquery css charts google-visualization


【解决方案1】:

试试

google.charts.setOnLoadCallback(function() {

  $('#t1').click(function () {
    // ...
  });

  $('#t2').click(function () {
    // ...
  });

  // ...

});

https://embed.plnkr.co/19CellQvdGZTjzf9hikU/

【讨论】:

  • 我总共有 16 个标签,所以我需要给每个喜欢的标签?
  • 什么意思
  • 实际上我创建了引导轮播,并且在轮播的每张幻灯片中我都有 4 个选项卡。幻灯片 1 -4 选项卡、幻灯片 2-4 选项卡、幻灯片 3-4 选项卡、幻灯片 4-4 选项卡,并在每个选项卡中显示图表
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-10-21
  • 2020-06-01
  • 2020-02-15
  • 2018-08-17
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多