0

我正在尝试将多个折线图加载到 highcharts 控件。我从服务器 (asp.net) 获取 JSON 并使用 Newtonsoft 的 JSONConvert 将通用列表转换为 JSON。

我的 x 轴标签将是自定义的（1 月、2 月、3 月……或“周一上午 9:00”、“周二上午 10:00”……等等），所以我试图传入 x -axis“类别”也到客户端。

2 天来一直在拉我的头发并尝试不同的东西。我远非 JSON 专家，这是我第一次使用 Highcharts，所以请原谅我可能是新手代码:)。我已经阅读了很多关于 SO 的类似帖子，但似乎没有一个是相同的需求组合，或者我可能遗漏了一些东西。帮助！

//This is a webapi call that returns the data for multiple line charts
public dynamic GetOverViewLineChart()
{
    List<ChartClasses.ChartPoint> chartPoints = GetChart();

    //this should be in a function that looks at time range and selects the appropriate 
    // x-axis values
    List<string> categories = (
                                from chartpoint in chartPoints
                                select new string(chartpoint.category.ToCharArray())
                               ).ToList();

    List<ChartClasses.ChartSeries> seriesToPlot = new List<ChartClasses.ChartSeries>();
    seriesToPlot.Add(new ChartClasses.ChartSeries(JsonConvert.SerializeObject(chartPoints), "firstChart"));
    seriesToPlot.Add(new ChartClasses.ChartSeries(JsonConvert.SerializeObject(chartPoints), "secondChart"));

    string returnJson = JsonConvert.SerializeObject(seriesToPlot);
    string returnCategories = JsonConvert.SerializeObject(StuffCategories(categories));

    return new {
                    categories = JsonConvert.SerializeObject(categories), 
                    seriesData = JsonConvert.SerializeObject(seriesToPlot) 
    };
}

private List<ChartClasses.ChartPoint> GetChart()
{
    List<ChartClasses.ChartPoint> chartPoints = new List<ChartClasses.ChartPoint>() { 
            new ChartClasses.ChartPoint("January","Jan", 1),
            new ChartClasses.ChartPoint("February","Feb", 2)
        };
    return chartPoints;
}

  public class ChartClasses
{
    public class ChartPoint
    {
        //property names get serialized and match what the chart control expects
        public string name; //in balloon help
        public int y; //y value
        public string category; //goes on X axis

        public ChartPoint(string tooltip, string xval, int yval)
        {
            name = tooltip;
            y = yval;
            category = xval;
        }
    }

    public class ChartSeries
    {
        public string name;

        private string _data;

        public string data { 
            get {return _data;}
            set
            {
                //string originalValue = value;
                _data = value.Replace(@"\",string.Empty).Replace(@"""","'");
            }
        }

        public ChartSeries(string dataVal, string nameVal)
        {
            data = dataVal;
            name = nameVal;
        }
    }
}

这是客户端代码：

<script language="javascript" type="text/javascript">
    var seriesOptions = [],
        seriesCounter = 0;

    $.get('/api/WebAnalytics/GetOverViewLineChart', function (data) {
        $.each(JSON.parse(data.seriesData), function (i, chartSeries) {

            var thisData = {};
            thisData.data = chartSeries.data;

            seriesOptions[i] = {
                name: i,
                data: thisData
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter++;

            if (seriesCounter == (JSON.parse(data.seriesData)).length) {
                createChart(data);
            }

        });
    });

    function createChart(data) {

        $('#chartContainer').highcharts({
            chart: {
                type: 'line'
            },

            xAxis: {
                categories: data.categories
            },

            series: seriesOptions
        });

    }
</script>

当我运行它时，我只得到一个没有数据的图表。帮助！

谢谢。

编辑：

感谢 Pawel 的建议，我再次查看了我是如何解析 JSON 并让它工作的！！这是工作代码：

    <script language="javascript" type="text/javascript">
    var seriesOptions = [],
        seriesCounter = 0;

    $.get('/api/WebAnalytics/GetOverViewLineChart', function (categoriesAndSeriesData) {

        $.each(JSON.parse(categoriesAndSeriesData.seriesData), function (i, chartSeries) {

            var chartPoints = JSON.parse(chartSeries.data);

            //make series data array from array of chartPoints
            var dataPoints = [];
            $.each(chartPoints, function (idx, chartPoint) {
                dataPoints.push(chartPoint.y);
            });


            seriesOptions[i] = {
                name: chartSeries.name,
                data: dataPoints
            };

            seriesCounter++;

            if (seriesCounter == (JSON.parse(categoriesAndSeriesData.seriesData)).length) {
                createChart(categoriesAndSeriesData);
            }

        });
    });

    function createChart(categoriesAndSeriesData) {

        $('#chartContainer').highcharts({
            chart: {
                type: 'line'
            },

            xAxis: {
                categories: data.categories
            },

            series: seriesOptions
        });

    }


</script>
4

0 回答 0