Google Chart给定轴上的所有系列必须具有相同的数据类型混淆错误

时间:2017-04-25 07:54:43

标签: javascript json ajax charts google-visualization

当我运行我的Google图表时,我对此错误消息感到困惑。这是我生成图表的代码。

function (resultVal) {
    var arrMain = new Array();//[];
    for (var i = 0; i < resultVal.length; i++) {
        var arr = new Array(resultVal[i].ScaleMin, resultVal[i].CountryNo, resultVal[i].ScaleMax, resultVal[i].Currency);
        arrMain.push(arr);
        }
        var data = new google.visualization.DataTable();
        data.addColumn({ type: 'number', id: 'ScaleMin', label: 'ScaleMin' });
        data.addColumn({ type: 'number', id: 'CountryNo', label: 'CountryNo' });
        data.addColumn({ type: 'number', id: 'ScaleMax', label: 'ScaleMax' });
        data.addColumn({ type: 'string', id: 'Currency', label: 'Currency' });
        data.addRows(arrMain);
        var options = {
        'title': 'Salad Entry',
        'width': 800,
        'height': 600
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'ready', function () {
        chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
        $.ajax({
        url: "SaladEntry/SaveToLocal",
        type: "POST",
        data: { 'jsonData': chart.getImageURI() },
        success: function (ret) {
        alert(ret);
        }
        });
        });
        chart.draw(data, options);

这是我在加载图表时收到的错误消息。

enter image description here

我将数组列表设置为图表的数据源。

enter image description here

1 个答案:

答案 0 :(得分:4)

您只能在x轴或第一列

上使用'string'数据类型

除非它被用作注释,工具提示或其他column role

以下列导致问题

data.addColumn({ type: 'string', id: 'Currency', label: 'Currency' });

如果您想添加货币作为注释,则需要设置role属性...

data.addColumn({ type: 'string', id: 'Currency', role: 'annotation' });

这会导致货币栏中的值显示在标签中,
作为注释,在系列列的每个点上方 - &gt; 'ScaleMax'

列角色仅适用于他们遵循的系列列

每个图表类型都有一个特定的data format,其中列出了每列可能具有的类型

所有常见图表都是一样的,例如直线,面积,柱子,条形等......

编辑

请参阅以下工作代码段...

&#13;
&#13;
google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn({type: 'string', label: 'x'});
    data.addColumn({type: 'number', label: 'y'});
    data.addColumn({type: 'string', role: 'style'});
    data.addRow(['one', 1, 'color: green']);

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, {
      legend: 'none'
    });
  },
  packages: ['corechart']
});
&#13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
&#13;
&#13;
&#13;