javascript - 传递的字符串不呈现图表对象，但如果直接粘贴到 javascript 中则呈现字符串值。排行榜

Question

调试中。当执行离开我调试的 Controller 时，变量包含:

?sArray{字符串[17, 2]} [0, 0]: "Arecleoch" [0, 1]: "21" [1, 0]: "巴恩斯莫尔" [1, 1]: "3"

等等......

然后在 javascript 中接收为:

?sdata{...} [0]:“神界” [1]: "21" [2]:《巴恩斯莫尔》 [3]: "3" [4]:“Beinn An Tuirc” [5]: "1" [6]: "Beinn An Tuirc Phase 2"

等等

因此饼图显示为一个实心的彩色圆圈

困惑，有什么想法吗？

Controller 代码如下:

    public JsonResult GetChartData_IncidentsBySite()
    {
        var allSites = _securityRepository.FindAllSites();

        var qry = from s in _db.Sites   
                  join i in _db.Incidents on s.SiteId equals i.SiteId 
                  group s by s.SiteDescription 
                      into grp
                      select new
                      {
                          Site = grp.Key,
                          Count = grp.Count()
                      };

        string[,] sArray = new string[qry.Count(),2];
        int y = 0;

        foreach (var row in qry.OrderBy(x => x.Site))
        {
            if ((row.Count > 0) && (row.Site != null))
            {
                sArray[y, 0] = row.Site.ToString();
                sArray[y, 1] = row.Count.ToString();
                y++;
            }
        }

        return Json(sArray , JsonRequestBehavior.AllowGet);
    }

这是javascript代码:

    $.getJSON(url, null, function(sdata) {

        debugger;
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },

            title: {
                text: 'Number of Environmental Incidents by Site'
            },

            tooltip: {
                formatter: function() {
                    return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Incidents by Site',
                data: sdata    

  }]
            });
        });
    });

Answer 1

在有效的版本中，数据是字符串数组的数组；

    data: [["Arecleoch",21], ... 

(注意第一个括号前没有左引号)。

在不起作用的版本中，它是一个代表Array的String。我怀疑图表 API 只需要一个数组(在这种情况下，实际上是一个数组数组)。

所以这取决于它的作用:

$.getJSON(url, null, function(data) {
  // What is the type of data here ? 

从您的 Controller 和调试器的显示来看，我认为数据本身就是一个数组的数组。您应该直接将它传递给图表 API(没有 sData = data.toString())函数，该函数实际上将数组 ['a', 'b', 'c'] 转换为表示数组的字符串，例如“[' a', 'b', 'c']");

// Callback parameter renamed to show it is an Array of Arrays
$.getJSON(url, null, function(aaData) { 
  // ... skipped ... 
  series: [{
                type: 'pie',
                name: 'Incidents by Site',
                data: aaData /* Use the Array itself */
          }]

---

编辑:我的解决方案只有在 Controller 输出如下内容时才有效:

{
  data : [[ "Arecleoch", 21], ["Whatever", 42]]
}

但是看起来你的 Controller 返回类似

的东西

{
  data : "[['Arecleoch', 21],['Whatever', 42]]"
}

(也许没有 { data : } 部分，我不知道您是否需要顶级元素或者您是否直接返回 JSON 中的数组)

是这样吗？如果是这样，那么您将不得不:

• 更换 Controller
• 在客户端用javascript解析字符串