c# - 将 json 数据加载到具有多个系列的 highcharts

Question

请帮忙。我已经在这个问题上用头撞墙一周了，尝试了我能在网上找到的每一个选项，但没有运气......

正在将 HighCharts 与 C#/Razor/WebMatrix 站点一起使用。尝试创建堆积柱形图 - 让我的类别动态加载，但无法加载系列。

我对 Javascript 和 Web 编程总体来说是新手，所以请多多关照!

JSON返回数据为:

["Clubs","1850","2600","5600","4950","8535","6050","8640",
 "Fesitvals","0","0","1000","750","0","1500","3250",
 "Private","650","2300","1600","2500","0","400","900",
 "Weddings","0","1400","3600","0","0","0","0",
 "Other Income","0","0","70","540","50","0","0"]

我正在尝试在渲染图表之前加载系列数据...以下是整个脚本以及格式等。

脚本轰炸了处理和加载 Json 数据集的函数(参见粗体/斜体)。如果对系列数据进行硬编码，图表看起来很棒，但由于该网站是数据库驱动的并且数据定期更改......

这是脚本:

$(function () {
    var ChartType = document.getElementById("CType").value;
    var SelectMember = document.getElementById("SMbmr").value;
    Highcharts.theme = {

        chart: {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
            [0, 'rgb(0, 0, 0'],
            [1, 'rgb(0, 0, 0)']
         ]
            },
            borderWidth: 0,
            borderRadius: 15,
            plotBackgroundColor: null,
            plotShadow: false,
            plotBorderWidth: 0
        },
        title: {
            style: {
                color: '#FFF',
                font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
            }
        },
        subtitle: {
            style: {
                color: '#DDD',
                font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
            }
        },
        xAxis: {
            gridLineWidth: 0,
            lineColor: '#999',
            tickColor: '#999',
            labels: {
                style: {
                    color: '#999',
                    fontWeight: 'bold'
                }
            },
            title: {
                style: {
                    color: '#AAA',
                    font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
                }
            }
        },
        yAxis: {
            alternateGridColor: null,
            minorTickInterval: null,
            gridLineColor: 'rgba(255, 255, 255, .1)',
            minorGridLineColor: 'rgba(255,255,255,0.07)',
            lineWidth: 0,
            tickWidth: 0,
            labels: {
                style: {
                    color: '#999',
                    fontWeight: 'bold'
                }
            },
            title: {
                style: {
                    color: '#AAA',
                    font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
                }
            }
        },
        legend: {
            itemStyle: {
                color: '#CCC'
            },
            itemHoverStyle: {
                color: '#FFF'
            },
            itemHiddenStyle: {
                color: '#333'
            }
        },
        labels: {
            style: {
                color: '#CCC'
            }
        },
        tooltip: {
            backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
            [0, 'rgba(96, 96, 96, .8)'],
            [1, 'rgba(16, 16, 16, .8)']
         ]
            },
            borderWidth: 0,
            style: {
                color: '#FFF'
            }
        },


        plotOptions: {
            series: {
                shadow: true
            },
            line: {
                dataLabels: {
                    color: '#CCC'
                },
                marker: {
                    lineColor: '#333'
                }
            },
            spline: {
                marker: {
                    lineColor: '#333'
                }
            },
            scatter: {
                marker: {
                    lineColor: '#333'
                }
            },
            candlestick: {
                lineColor: 'white'
            }
        },

        toolbar: {
            itemStyle: {
                color: '#CCC'
            }
        },

        navigation: {
            buttonOptions: {
                symbolStroke: '#DDDDDD',
                hoverSymbolStroke: '#FFFFFF',
                theme: {
                    fill: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                  [0.4, '#606060'],
                  [0.6, '#333333']
               ]
                    },
                    stroke: '#000000'
                }
            }
        },

        // scroll charts
        rangeSelector: {
            buttonTheme: {
                fill: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
                },
                stroke: '#000000',
                style: {
                    color: '#CCC',
                    fontWeight: 'bold'
                },
                states: {
                    hover: {
                        fill: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                     [0.4, '#BBB'],
                     [0.6, '#888']
                  ]
                        },
                        stroke: '#000000',
                        style: {
                            color: 'white'
                        }
                    },
                    select: {
                        fill: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                     [0.1, '#000'],
                     [0.3, '#333']
                  ]
                        },
                        stroke: '#000000',
                        style: {
                            color: 'yellow'
                        }
                    }
                }
            },
            inputStyle: {
                backgroundColor: '#333',
                color: 'silver'
            },
            labelStyle: {
                color: 'silver'
            }
        },

        navigator: {
            handles: {
                backgroundColor: '#666',
                borderColor: '#AAA'
            },
            outlineColor: '#CCC',
            maskFill: 'rgba(16, 16, 16, 0.5)',
            series: {
                color: '#7798BF',
                lineColor: '#A6C7ED'
            }
        },

        scrollbar: {
            barBackgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
            },
            barBorderColor: '#CCC',
            buttonArrowColor: '#CCC',
            buttonBackgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
               [0.4, '#888'],
               [0.6, '#555']
            ]
            },
            buttonBorderColor: '#CCC',
            rifleColor: '#FFF',
            trackBackgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
            [0, '#000'],
            [1, '#333']
         ]
            },
            trackBorderColor: '#666'
        },

        // special colors for some of the demo examples
        legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',
        legendBackgroundColorSolid: 'rgb(70, 70, 70)',
        dataLabelsColor: '#444',
        textColor: '#E0E0E0',
        maskColor: 'rgba(255,255,255,0.3)'
    };

    // Apply the theme
    var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
    var CatName = new Array();
    var DataSeries = new Array();
    var currentDate = new Date();
    var currentYear = currentDate.getFullYear();
    for (var i = 2007; i <= currentYear; i++) {
        CatName.push(i.toString());
    }
    ***$.getJSON('/Admin/Accounting/ChartJSon/' + ChartType + '/0', function (DataSet) {
          options.series = DataSet;
    });***
    $('#container').highcharts(
        {

            chart:
            {
                renderTo: 'container',
                defaultSeriesType: 'column',
                plotBorderWidth: 1,
                plotBorderColor: '#3F4044'
            },
            credits: { enabled: false },
            title:
            {
                text: 'Sales by Type and Year'
            },

            xAxis:
            {
                categories: CatName
            },

            yAxis:
            {
                allowDecimals: false,
                min: 0,
                title:
                {
                    text: 'Sales'
                }
            },

            tooltip:
            {
                formatter: function () {
                    return '<b>' + this.x + '</b><br/>' +
                        this.series.name + ': ' + this.y + '<br/>' +
                        'Total: ' + this.point.stackTotal;
                }
            },

            plotOptions:
            {
                column:
                {
                    stacking: 'normal'
                }
            },

            series: []
        });

});

Answer 1

我在这里看到了一些问题。首先尝试用下面提到的代码替换 highchart 代码。因为您需要在系列选项中指定每个系列的数据。并提供唯一的名称。

 $('#container').highcharts(
                {

                    chart:
                    {
                        renderTo: 'container',
                        defaultSeriesType: 'column',
                        plotBorderWidth: 1,
                        plotBorderColor: '#3F4044'
                    },
                    credits: { enabled: false },
                    title:
                    {
                        text: 'Sales by Type and Year'
                    },

                    xAxis:
                    {
                        categories: CatName
                    },

                    yAxis:
                    {
                        allowDecimals: false,
                        min: 0,
                        title:
                        {
                            text: 'Sales'
                        }
                    },

                    tooltip:
                    {
                        formatter: function () {
                            return '<b>' + this.x + '</b><br/>' +
                                this.series.name + ': ' + this.y + '<br/>' +
                                'Total: ' + this.point.stackTotal;
                        }
                    },

                    plotOptions:
                    {
                        column:
                        {
                            stacking: 'normal'
                        }
                    },

                   series: [{
                        name: 'Clubs',
                        data: []
                    }, {
                        name: 'Festivals',
                        data: []
                    }, {
                        name: 'Private',
                        data: [],
                    }, {
                        name: 'Weddings',
                        data: [],
                    }, {
                        name: 'OtherIncome',
                        data: [],
                    }]
                });

        });

您的 JSON 应该是一个仅包含数字的数组。