如何构造 HighCharts 数据系列以匹配通过 ajax 调用返回的 Json答案

【问题标题】：How to construct HighCharts data series to match returned Json via ajax call如何构造 HighCharts 数据系列以匹配通过 ajax 调用返回的 Json
【发布时间】：2018-05-18 21:53:53
【问题描述】：

我正在尝试使用从我的 .NET 控制器返回的 JSON 构造一个 Highchart。数据格式如下（在控制器中）：

var data = new
        {
             sentiment = new[]
             {
              new { value = "Positive", data = positiveScore.ToString() },
              new { value = "Negative", data = negativeScore.ToString() },
              new { value = "Neutral", data = neutralScore.ToString() }
            }
        };

        return Json(data, JsonRequestBehavior.AllowGet);

我收到的数据如下：

我的 Highchart 是按以下方式构建的：

function sentimentAnalysisData(data)
//$(document).ready(function ()
{
var chart = new Highcharts.Chart({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie',
        renderTo: 'highchart'
    },
    title: {
        text: 'Sentiment Analysis'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{data}]


    //});
})
};

传递给我的函数的data参数实际上就是你在我提供的图像中可以看到的数据。我通过 ajax 调用有一个 GET 请求，我在其中检索了数据，然后，在“成功”回调中，我调用了这个将构建图表的函数。

我的问题如下：生成了Highchart，我在前端可以看到，但是由于我的数据以错误的方式传递到series字段，所以图表体实际上是空的，没有数据以显示。我试图在途中生成它，我还尝试遍历对象，将其解析为两个数组并使用这些数组（一个用于描述字符串，一个用于值），但我遗漏了一些东西。有什么有用的想法吗？

【问题讨论】：

嗨，检查jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/…系列对象内没有value和data键。取而代之的是name和y键
@Patata 你是对的，我不知道我是怎么错过的。感谢您指出这一点，在那之后我能够解决我的问题

标签： javascript jquery json ajax highcharts

【解决方案1】：

我能够通过以下方式解决我的问题：

为了匹配饼图结构，我更改了构建 JSON 的方式，其中我有一个名称和一个值部分（名称部分必须记为“名称”，值记为“y”）

 var data = new[]
            {
              new { name = "Positive", y = positiveScore },
              new { name = "Negative", y = negativeScore },
              new { name = "Neutral" , y = neutralScore }

            };

        return Json(data, JsonRequestBehavior.AllowGet);

通过这种方式，我首先得到了我正在寻找的确切结构。此外，我从 y 中删除了 .toString()，因为 Highchart 需要一个数值，而不是字符串。如果省略这部分，您将收到以下错误：

发送到 series.data 的字符串值，如果你发生了他的预期数字传入一个字符串作为数据点

【讨论】：