轴 #0 的数据列不能是带有 ASP.NET 和 SQL Server 的 Google 图表中的字符串类型？

Question

我正在尝试在 Google 图表中显示一些数据，但出现此错误：

轴 #0 的数据列不能是字符串类型..

这是我第一次使用 Google Chart，我正在尝试使用 ASP.NET Webforms 和 SQL Server。我有一个 WebMethod，它以与 Google Chart 绑定的数组格式从数据库返回数据。

这是脚本的代码：

<script>
    var chartData; // globar variable for hold chart data
    google.load("visualization", "1", { packages: ["corechart"] });

    // Here We will fill chartData

    $(document).ready(function () {

        $.ajax({
            url: "../../Pages/Test.aspx/GetSentimentData",
            data: "",
            dataType: "json",
            type: "POST",
            contentType: "application/json; chartset=utf-8",
            success: function (data) {
                chartData = data.d;
            },
            error: function () {
                alert("Error loading data! Please try again.");
            }
        }).done(function () {
            // after complete loading data
            google.setOnLoadCallback(drawChart3);
            drawChart3();
        });
    });


    function drawChart3() {
        var data = google.visualization.arrayToDataTable(chartData);

        var options = {
            title: "Distribution of Sentiment Analysis Results",
            hAxis: { title: 'University'},
            vAxis: { title: 'Number of Tweets' },
            pointSize: 5
        };

        var columnChart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        columnChart.draw(data, options);

    }
</script>

那么您能否告诉我如何创建一个 Google 柱形图，其中 x 轴中的每个项目将具有三个系列？

Answer 1

一旦建立数据表，
使用数据视图为每个独特的情绪标签创建一个新列

然后聚合数据视图以删除重复并总计每一列

看下面的sn-p...

function drawChart3() {
  var data = google.visualization.arrayToDataTable(chartData);

  // create data view
  var view = new google.visualization.DataView(data);

  // init column arrays
  var aggColumns = [];
  var viewColumns = [0];

  // build view & agg column for each sentiment label
  data.getDistinctValues(1).forEach(function (label, index) {
    // add view column
    viewColumns.push({
      calc: function (dt, row) {
        if (dt.getValue(row, 1) === label) {
          return dt.getValue(row, 2);
        }
        return null;
      },
      label: label,
      type: 'number'
    });

    // add agg column
    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: index + 1,
      label: label,
      type: 'number'
    });
  });

  // set view columns
  view.setColumns(viewColumns);

  // agg view by university
  var group = google.visualization.data.group(
    view,
    [0],
    aggColumns
  );

  var options = {
    title: "Distribution of Stanford CoreNLP Sentiment Analysis Results by University",
    hAxis: { title: 'University'},
    vAxis: { title: 'Number of Tweets' },
    pointSize: 5
  };

  var columnChart = new google.visualization.ColumnChart(document.getElementById('stanfrod_sentiment_by_uni_chart_div'));
  columnChart.draw(group, options);  // <-- use agg data table
}

---

注意

建议不使用jsapi加载库，根据release notes...

通过jsapi 加载程序仍然可用的 Google Charts 版本不再持续更新。请从现在开始使用新的 gstatic 加载程序 (loader.js)。

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

这也会将load 语句更改为...

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

---

也

您不应多次致电setOnLoadCallback

您可以依靠 google 的回调来了解文档何时准备就绪

不需要 --> $(document).ready

一旦回调触发，您可以根据需要绘制任意数量的图表

加载 google，然后使用 ajax 获取数据，请参见此处的设置 --> Javascript ajax get data from C#