使用 JSON 数组填充图表

Use Json array to populate chart

本文关键字：填充 数组 JSON 使用      更新时间：2023-09-26

我正在使用HighCharts来绘制Json数据。

我正在使用折线图选项，通过该选项填充点，例如 -

C# 

protected string intsAsJSArray
    {
        get
        {
            return string.Format("[{0}]", string.Join(",", listOfInts));
        }
    }
protected string datesAsJSArray
    {
        get
        {
            return string.Format("[{0}]", string.Join(",", listOfDates));
        }
    }

阿斯普克斯

series: [{
            type: 'area',
            name: 'Count:',
            pointInterval: 24 * 3600 * 1000,
            pointStart: Date.UTC(2013, 10, 31),
            data: <%= intsAsJSArray %>               
        }]

目前pointStart是硬编码的，但是我想要实现的是针对listOfDates中的每个日期在图表上为listOfInts中的相应 int 设置一个点。我想返回一个列表可能是一个有趣的想法，其中每一行都是 int 和日期的连接，即 listOfRecords.Add(1,2013-10-31)，然后在Javascript中拆分它。我怎样才能做到这一点？

只需将 x 轴变量设置为与您的列表相等。

        var mydata = @Json.Encode(Model.intsAsJSArray);
        var myHeaders = @Html.Raw(@Json.Encode(Model.datesAsJSArray));
        $(function () {
            $('#chart').highcharts({
                xAxis: {
                    categories: myHeaders,
                },
                series: [{
                    name: 'Some data I have',
                    data: mydata
                }]
            });
        });

不过，您必须确保两个数组的大小相等。您可以在视图模型中用日期填充数组。

其他的灵魂是为每个点使用 x/y 参数，使用 highstock 并将序数参数设置为 false。

http://api.highcharts.com/highstock#xAxis.ordinal

相关文章：