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

Posted 2023-05-08

【中文标题】如何构造 HighCharts 数据系列以匹配通过 ajax 调用返回的 Json

【英文标题】：How to construct HighCharts data series to match returned Json via ajax call

【发布时间】：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 你是对的，我不知道我是怎么错过的。感谢您指出这一点，在那之后我能够解决我的问题

【参考方案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 的字符串值，如果你发生了他的预期数字 传入一个字符串作为数据点