没有消息或错误ID的谷歌图表错误 [英] google chart error without message or error id

问题描述

就像我在标题中提到的，我在图表中遇到错误，但没有消息，所以我无法修复它。图表功能也很好。这是一张图表。它看起来很好，图表的onhover和onclick函数也在工作。

这是我的JS的图表。这些标签可能有点奇怪，因为我将它插入到stackoverflow中。它与示例图表几乎相同。我添加了侦听器来检查窗口大小是否发生变化，并且我在页面上有几个按钮可以给json调用一个查询值，最终有一个函数可以获得$ _GET变量。

  var clicked = false; 
 var nr =; （'click'，function（e）{
 clicked ='）; 
 $（function（）{
 
 $（'button [id ^ =chart_button true; 
 nr = $（this）.attr（'id'）; 
 drawChart（）; 
}）; 
 
 //检查窗口大小
 if（document.addEventListener）{
 window.addEventListener（resize，drawChart）; 
} else if（document.attachEvent）{
 window.attachEvent（onresize，drawChart ）; 
} else {
 window.resize = drawChart; 
} 
}）; 
 
函数getstart（）{
 if（clicked）{
 return $（'＃'+ nr）.attr（'value'）; 
 
 return $（'＃tabbuttongroup'）。children（）。first（）。attr（'value'）; 
} 
 
 google.charts.setOnLoadCallback（drawChart）; 
 
函数drawChart（）{
 var jsonData = $ .ajax（{
 dataType：json，
 url：modules / Forecast / models / getForecastChart。 php，
 data：{
 id：getQueryVariable（'record'），
 start_date：getstart（）
}，
 async：false 
} ）.responseText; 
 
 var mydata = $ .parseJSON（jsonData）; 
 
 var data = new google.visualization.DataTable（）; 
 
 data.addColumn（datetime，Date）; 
 data.addColumn（数字，实际金额）; 
 data.addColumn（数字，预测金额）; 
 data.addColumn（数字，实际价格）; 
 data.addColumn（数字，预测价格）; 
 
 for（var i = 0; i< mydata ['forecast'] .length; i ++）{
 var datesplit = String（mydata ['forecast'] [i] [2 ]）。分裂（'-'）; 
 var date = new Date（datesplit [0]，datesplit [1] -1，datesplit [2]）; 
 $ b $ data.addRow（[
 date，
 Number（mydata ['actual'] [i] [5]），
 Number（mydata ['forecast' （mydata ['actual'] [i] [6]），
 Number（mydata ['forecast'] [i] [6]）
]）; 
 
 
 var options = {
 bars：'vertical'，
 hAxis：{
 title：Date，
 gridlines： {
 count：-1，
 units：{
 days：{
 format：[dd MMM] 
} 
} 
 } 
}，
 vAxis：{
格式：'decimal'
}，
颜色：['＃00AAFF'，'＃0088FF'，'＃EEDD55' ，'＃EEBB55'] 
}; 
 
 var chart = new google.charts.Bar（document.getElementById（'chart_div'））; 
 chart.draw（data，options）; 
} 
 
函数getQueryVariable（变量）{
 var query = window.location.search.substring（1）; 
 var vars = query.split（&）; 
 for（var i = 0; i< vars.length; i ++）{
 var pair = vars [i] .split（=）; 
 if（pair [0] == variable）{
 return pair [1]; 
} 
} 
 alert（'Query Variable'+ variable +'not found'）; 
 
  

解决方案

code>'error'图表中的事件，这可能会提供更多详细信息。

google.visualization.events.addListener（chartInstance，'error'，handler）;

handler 将收到一个含有两个属性的参数， id & message

您可以使用<$ $ removeError c $ c> id 或简单地 removeAll 使用图表容器

使用 Material 图表，您应该转换选项...

google.charts.Bar.convertOptions（options）

（注意网格线的差异）

请看下面的例子...

  google.charts.load（'current'，{'packages'：['bar']}）; google.charts.setOnLoadCallback（ drawChart）;函数drawChart（）{var mydata = {forecast：[[new Date（2016,04,31），5,6,7,8]，[new Date（2016,05,01），4，8， 9，8]，[新日期（2016,05,02），8,4,0,6]，[新日期（2016,05,03），2,2,1,3]]}; var data = new google.visualization.DataTable（）; data.addColumn（datetime，Date）; data.addColumn（数字，实际金额）; data.addColumn（数字，预测金额）; data.addColumn（数字，实际价格）; data.addColumn（数字，预测价格）; for（var i = 0; i< mydata ['forecast'] .length; i ++）{data.addRow（[mydata ['forecast'] [i] [0]，mydata ['forecast'] [i] [ 1]，mydata ['forecast'] [i] [2]，mydata ['forecast'] [i] [3]，mydata ['forecast'] [i] [4]]）; } var options = {bars：'vertical'，hAxis：{title：Date，gridlines：{count：-1，units：{days：{format：[dd MMM]}}}}，vAxis：{格式：'decimal'}，颜色：['＃00AAFF'，'＃0088FF'，'＃EEDD55'，'＃EEBB55']}; var container = document.getElementById（'chart_div'）; var chart = new google.charts.Bar（container）; / /抛出错误测试google.visualization.events.addListener（图表，'准备'，函数（）{抛出新的错误（'测试谷歌错误'）;}）; //听错误google.visualization.events.addListener（图表，'error'，function（err）{//检查错误console.log（err.id，err.message）; //删除错误google.visualization.errors .removeError（err.id）; //删除所有错误google.visualization.errors.removeAll（container）;}）; // convert options chart.draw（data，google.charts.Bar.convertOptions（options））;}  

 < script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =chart_div> < / div>  

Like i mentioned in the title i get an error in the chart but no mesage so i cant fix it. Also the chart is function well. Here is a picture of the chart. it looks fine and the onhover and onclick functions of the chart are working too.

Here is my JS for the chart. The tabs may be a bit weird because of the way im inserting it in to stackoverflow. Its almost the same as the example charts. I have added listener to check if window size changes and i have a few buttons on the page that give the json call a value to query with.finally there is a function to get $_GET variables.

var clicked = false;
var nr = "";
$(function () {

        $('button[id^="chart_button"]').on('click', function (e) {
        clicked = true;
        nr = $(this).attr('id');
        drawChart();
        });

    //check window size
    if (document.addEventListener){
        window.addEventListener("resize", drawChart);
    }else if (document.attachEvent){
        window.attachEvent("onresize", drawChart);
    }else{
        window.resize = drawChart;
    }
});

function getstart(){
    if(clicked){
        return $('#'+nr).attr('value');
    }
    return $('#tabbuttongroup').children().first().attr('value');
}

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var jsonData = $.ajax({
        dataType: "json",
        url: "modules/Forecast/models/getForecastChart.php",
        data: {
            id: getQueryVariable('record'),
            start_date: getstart()
        },
        async: false
    }).responseText;

    var mydata = $.parseJSON(jsonData);

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

    data.addColumn("datetime", "Date");
    data.addColumn("number", "Actual Amount");
    data.addColumn("number", "Forecast Amount");
    data.addColumn("number", "Actual Price");
    data.addColumn("number", "Forecast Price");

    for(var i = 0; i < mydata['forecast'].length; i++){
        var datesplit = String(mydata['forecast'][i][2]).split('-');
        var date = new Date(datesplit[0], datesplit[1]-1, datesplit[2]);

        data.addRow([
            date,
            Number(mydata['actual'][i][5]),
            Number(mydata['forecast'][i][5]),
            Number(mydata['actual'][i][6]),
            Number(mydata['forecast'][i][6])
        ]);
    }

    var options = {
        bars: 'vertical',
        hAxis: {
            title: "Date",
            gridlines: {
                count: -1,
                units: {
                    days: {
                        format: ["dd MMM"]
                    }
                }
            }
        },
        vAxis: {
            format: 'decimal'
        },
        colors: ['#00AAFF', '#0088FF', '#EEDD55', '#EEBB55']
    };

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

function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                        return pair[1];
                }
        }
        alert('Query Variable ' + variable + ' not found');
}

解决方案

you can listen for the 'error' event on the chart, which may provide more details

google.visualization.events.addListener(chartInstance, 'error', handler);

handler will receive an argument with two properties, id & message

you can then removeError using the id or simply removeAll using the chart container

also, when using Material charts, you should convert the options...
google.charts.Bar.convertOptions(options)

(note the difference in the gridlines)

see following example...

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

function drawChart() {
    var mydata = {forecast: [
      [new Date(2016,04,31), 5, 6, 7, 8],
      [new Date(2016,05,01), 4, 8, 9, 8],
      [new Date(2016,05,02), 8, 4, 0, 6],
      [new Date(2016,05,03), 2, 2, 1, 3]
    ]};

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

    data.addColumn("datetime", "Date");
    data.addColumn("number", "Actual Amount");
    data.addColumn("number", "Forecast Amount");
    data.addColumn("number", "Actual Price");
    data.addColumn("number", "Forecast Price");

    for(var i = 0; i < mydata['forecast'].length; i++){
        data.addRow([
            mydata['forecast'][i][0],
            mydata['forecast'][i][1],
            mydata['forecast'][i][2],
            mydata['forecast'][i][3],
            mydata['forecast'][i][4]
        ]);
    }

    var options = {
        bars: 'vertical',
        hAxis: {
            title: "Date",
            gridlines: {
                count: -1,
                units: {
                    days: {
                        format: ["dd MMM"]
                    }
                }
            }
        },
        vAxis: {
            format: 'decimal'
        },
        colors: ['#00AAFF', '#0088FF', '#EEDD55', '#EEBB55']
    };

    var container = document.getElementById('chart_div');
    var chart = new google.charts.Bar(container);

    // throw error for testing
    google.visualization.events.addListener(chart, 'ready', function () {
      throw new Error('Test Google Error');
    });

    // listen for error
    google.visualization.events.addListener(chart, 'error', function (err) {
      // check error
      console.log(err.id, err.message);

      // remove error
      google.visualization.errors.removeError(err.id);

      // remove all errors
      google.visualization.errors.removeAll(container);
    });

    // convert options
    chart.draw(data, google.charts.Bar.convertOptions(options));
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

这篇关于没有消息或错误ID的谷歌图表错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！