0

我有 C# 的 MVC 4 应用程序，我正在使用谷歌可视化 api 柱形图来做一些图形来获取一些信息。但是从一两周开始，我对信息的可视化有了一些错误：数据还可以，但绘图完全错误。

以下是我如何将数据从代码转换为 json：

public class Graph {
public ColInfo[] cols { get; set; }
public DataPointSet[] rows { get; set; }
public Dictionary<string, string> p { get; set; }
}

public class ColInfo {
    public string id { get; set; }
    public string label { get; set; }
    public string type { get; set; }
}

public class DataPointSet {
    public DataPoint[] c { get; set; }
}

public class DataPoint {
    public string v { get; set; } // value
    public string f { get; set; } // format
}

然后是一个示例用法：

        var graph = new Graph
    {
        cols = new ColInfo[] {
            new ColInfo { id = "A", label = "set A", type = "string" },
            new ColInfo { id = "B", label = "set B", type = "string" },
            new ColInfo { id = "C", label = "set C", type = "string" }
        },
        rows = new DataPointSet[] {
            new DataPointSet { c = new DataPoint[] {
                new DataPoint { v = someintValue.ToString(), f = someintValue.ToString() },
                new DataPoint { v = "b", f = "One" },
            } }
        },
        p = new Dictionary<string, string>()
    };

    string json;
    var s = new JsonSerializer();
    using (var sw = new StringWriter()) {
        s.Serialize(sw, graph);
        json = sw.ToString();
    }

这里也是来自谷歌柱形图游乐场的一个样本——> https://code.google.com/apis/ajax/playground/?type=visualization#column_chart

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
  Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
  google.load("visualization", "1", { packages: ["corechart"] });
  google.setOnLoadCallback(drawChart);
  function drawChart() {

      var customOptions = function (title) {
          var options = {
              title: title,
              hAxis: { textStyle: { color: '#1d3842', fontSize: 12 } },
              vAxis: { title: 'Minutes', titleTextStyle: { fontSize: 14, bold: true } },
              titleTextStyle: { color: '#1d3842', fontSize: 14, bold: true },
              chartArea: { left: 32, right: 0,left: 52, width: 460, height: 180 },
              legend: { position: 'none' },
              colors: ['#556d82'],
          }
          return options;
      }

      // here in the () is an example Json i've copied from my actual site

      var data = new google.visualization.DataTable('{"cols":[{"id":"r","label":"Reason","type":"string"},{"id":"m","label":"Minutes","type":"number"}],"rows":[{"c":[{"v":"Flour - Blower","f":"Flour - Blower"},{"v":"7","f":"7"}]},{"c":[{"v":"Whole Line - d","f":"Whole Line - d"},{"v":"4","f":"4"}]},{"c":[{"v":"Flour - Pipework","f":"Flour - Pipework"},{"v":"3","f":"3"}]},{"c":[{"v":"Horseshoe - Belt","f":"Horseshoe - Belt"},{"v":"1","f":"1"}]}],"p":null}');

      var chart1 = new google.visualization.ColumnChart(document.getElementById('visualization'));
      chart1.draw(data, customOptions('Mechanical or Electrical'));
  }


  google.setOnLoadCallback(drawVisualization);
</script>

我已经尝试使用硬编码的 json，在每个“v:”上都有一个整数值，我删除了括号，它变成了这样 -> {"c":[{"v":"Flour - Blower","f ":"面粉 - 鼓风机"},{ "v": 7 ,"f":"7"}]}

当我删除所有有数值的括号时，它工作正常。但是如何构建具有正确值的 json 对象。我该如何处理这个问题？我应该让javascript替换v之后的所有字符串值：可以用没有“”的整数解析，或者以某种方式从后面的代码中处理这个问题？

4

1 回答 1

1

ChartToolsDataSourceProtocol不支持将字符串转换为数字。我们正在考虑在下一个版本中解决这个问题。

同时，要做的事情（如您所建议的）是将字符串转换为数字。就像是：

    for (i in a.rows) {
     for (j in a.cols) {
       if (a.cols[j].type == "number") {
         a.rows[i].c[j].v = Number(a.rows[i].c[j].v);
       }
     }
于 2013-12-04T15:16:09.370 回答