Question

我正在尝试显示高图。我用这个 http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic/

现在我尝试这个webmethod

[WebMethod]
        public static string select()
        { 

        SMSEntities d = new SMSEntities();
        List<string> name = new List<string>();
        var mdata = new SMSEntities().selectdata()
        .Select(s => new { s.name }).ToArray().Distinct();
     var score = new SMSEntities().selectdata().Select(s => new { s.name, s.Salary });
        var json1 = new JavaScriptSerializer().Serialize(mdata);
        var json2 = new JavaScriptSerializer().Serialize(score);         
       var result = new { data = json1, data2 = json2 };
        return Newtonsoft.Json.JsonConvert.SerializeObject(result);


        }

和jquery

<script type="text/javascript">
    //var strArray = "[{ name: 'abc_name', data: [34000] }, { name: 'ght_name', data: [45000] }, { name: 'lmn_name', data: [34000] }, { name: 'hh_name', data: [33000] }]";

    $(function () {
        $.ajax({
            type: "POST",
            url: "WebForm1.aspx/select",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,

            success: function (result) {
                debugger;
                var data = result.d;
                debugger
                data = JSON.parse(data);
                debugger
                var data1 = JSON.parse(data.data);
                debugger
                var data2 = JSON.parse(data.data2);


                alert(data1);



                alert(data2);


                debugger;
                //console.log(result);

                //var od = JSON.stringify(result);
                //debugger;
                //alert("1");
                //var obj = JSON.parse(od);
                //debugger;
                //alert(od);
                // alert(obj);



                //console.log(data2);


                Highcharts.chart('container', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Monthly Average Rainfall'
                    },
                    subtitle: {
                        text: 'Source: WorldClimate.com'
                    },
                    xAxis: {
                        categories:data1,
                        //    'Jan',
                        //    'Feb',
                        //    'Mar',
                        //    'Apr',
                        //    'May',
                        //    'Jun',
                        //    'Jul',
                        //    'Aug',
                        //    'Sep',
                        //    'Oct',
                        //    'Nov',
                        //    'Dec'
                        //],
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Rainfall (mm)'
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },

                    //series: [{
                    //    name: 'Tokyo',
                    //    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

                    //}, {
                    //    name: 'New York',
                    //    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

                    //}, {
                    //    name: 'London',
                    //    data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

                    //}, {
                    //    name: 'Berlin',
                    //    data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

                    //}]


                    series: data2
                });

            },
            error: function (error) {
                alert(error);
            }
        });
    });


</script>

数据未显示在图表中

图片

警告1

警告2

JS FIDDLE

http://jsfiddle.net/tvxufa68/1/

Answer 1

您的数据是一个josn`对象，您可以执行此操作

var data = { "data": "[{\"name\":\"abc_name\"},{\"name\":\"xyz_name\"},{\"name\":\"def_name\"},{\"name\":\"ght_name\"},{\"name\":\"lmn_name\"},{\"name\":\"hh_name\"}]", "data2": "[{\"name\":\"abc_name\",\"Salary\":\"34000\"},{\"name\":\"xyz_name\",\"Salary\":\"23000\"},{\"name\":\"def_name\",\"Salary\":\"1000\"},{\"name\":\"ght_name\",\"Salary\":\"45000\"},{\"name\":\"lmn_name\",\"Salary\":\"34000\"},{\"name\":\"hh_name\",\"Salary\":\"33000\"}]" };

var data1 = result.data1;
var data2 = result.data2;

收到数据后，您可以执行此操作

var data = result.d;
data = JSON.parse(data);
var data1 = JSON.parse(data.data);
var data2 = JSON.parse(data.data2);

var dataArrayFinal = Array();
for (i = 0; i < data2.length; i++) {
   name[i] = data2[i].name;
   data[i] = data2[i].Salary;
}

for (j = 0; j < name.length; j++) {
   dataArrayFinal[j] = { "name": name[j], "y":parseInt(data[j]) };
}

在图表代码中跟随

series: [{
   data: dataArrayFinal
}]

Here是您数据的jsfiddle

Answer 2

查看截图结果：

var data2 = JSON.parse(data.data2);

是具有属性Name和Salary的对象数组。您将此对象数组设置为高图中的series - 这不起作用，因为higharts需要series的非常特定的对象数组 - 请参阅docs。< / p>

你应该将你的data2游览到一个highcharts期望的数组

...
series: data2.map(function(x){
                       return {
                          name: x.name,
                          data: [parseInt(x.Salary,10)]
                       };
                    })
...

实例：http://jsfiddle.net/tvxufa68/2/

使用硬编码类别＆＃34;薪水＆＃34;：http://jsfiddle.net/tvxufa68/3/

另一种方法是使用name标记xaxis：http://jsfiddle.net/tvxufa68/4/

我确定其中一个版本符合您的需求！

拆分json数据

2 个答案: