Google Visualization多条形图

时间:2018-08-03 09:13:27

标签: javascript charts google-visualization column-chart

我正在使用barchart中的表值来满足这一要求。我尝试了一些东西,但是没有用。我收到错误消息Type mismatch. Value 5 does not match type string in column index 0 我仅添加了几段表代码和图表代码。 有什么帮助吗?预先感谢。

表格代码:

     success: function (data) {
      if (data.length > 0) {

      var tr;
      var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

      var cbs = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
      var cbns = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
      var cbn = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    for (var i = 0; i < data.length; i++) {

      var value = data[i].MonthCol;

    //Switch case to get the values for each column monthwise......
       }


       for(var i =0;i<12;i++){
          if (qualityvalue[i]) {
           tr = $('<tr/>');
           tr.append("<td>" + monthNames[i] + "</td>");
           tr.append("<td>" + cbs[i] + "</td>");
           tr.append("<td>" + cbns[i] + "</td>");
           tr.append("<td>" + cbn[i] + "</td>");
           $('#GraphTable').append(tr);
                            }


                        }

  $('#GraphTable').append('<tr style="font-weight: bold; background-color: white"></tr>');
...//code 

                var tdata = new google.visualization.DataTable();
                tdata.addColumn('string', 'Month');
                tdata.addColumn('number', 'Name1');
                tdata.addColumn('number', 'Name2');
                tdata.addColumn('number', 'Name3');

                for (var i = 0; i < 12; i++) {
                    if (qualityvalue[i]) {
                        tdata.addRow([monthNames[i], parseFloat(cbs[i]), parseFloat(cbns[i]), parseFloat(cbn[i])]);
                    }
                }

                var options = {
                  //code
                    title: 'Quality Chart ',
                    vAxis: {
                        title: ' ', titleTextStyle: { color: 'black', bold: true }, 'maxValue': 1, format: '#', gridlines: { count: 10, color: 'transparent' },

                    },
                    hAxis: { title: 'Month', titleTextStyle: { color: 'black', bold: true }, gridlines: { count: 12 }, maxAlternation: 1, showTextEvery: 1, minTextSpacing: 8 },
                    seriesType: 'bars',

                };
                var chart = new google.visualization.ColumnChart(document.getElementById('cumulative_div'));
                chart.draw(tdata, options);

我想要获得如下所示的图表: 'enter image description here

0 个答案:

没有答案