使用Javascript和MVC将数据传递给FusionChart

时间:2016-06-08 13:34:43

标签: javascript razor asp.net-mvc-5 fusioncharts

我对MVC和FusionCharts都比较陌生。我有一个视图,其中模型包含我需要的所有数据,我需要将此(或模型中的特定数据)传递给FusionChart。

我有一个FusionChart,它来自他们的网站(FusionCharts),它有硬编码值,但不知道如何用我的模型中的数据替换它。以下是我的FusionChart:

FusionCharts.ready(function () {
    var hourlySalesChart = new FusionCharts({
        type: 'multiaxisline',
        renderAt: 'chart-container2',
        width: '600',
        height: '350',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Revenue Analysis",
                "subcaption": "Last 12 weeks",
                "baseFontColor": "#333333",
                "baseFont": "Helvetica Neue,Arial",
                "xaxisname": "Week of Year",
                "showvalues": "0",
                "numvdivlines": "2",
                "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00",
                "bgColor": "#ffffff",
                "canvasBgColor": "#ffffff",
                "captionFontSize": "13",
                "subcaptionFontSize": "13",
                "subcaptionFontBold": "0",
                "showBorder": "0",
                "showPlotBorder": "0",
                "showXAxisLine": "1",
                "showShadow": "0",
                "showCanvasBorder": "0",
                "showAlternateHGridColor": "0",
                "showalternatevgridcolor": "1",
                "usePlotGradientColor": "0",
                "divlineColor": "#999999",
                "divlineThickness": "1",
                "divLineIsDashed": "1",
                "divLineDashLen": "1",
                "divLineGapLen": "1",
                "xAxisLineThickness": "1",
                "xAxisLineColor": "#999999",
                "legendBorderAlpha": "0",
                "legendShadow": "0",
                "alignCaptionWithCanvas": "0"
            },
            "categories": [
                {
                    "category": [
                        { "label": "0" },
                        { "label": "5000.00" },
                        { "label": "4000.00" },
                        { "label": "6000.00" },
                        { "label": "8000.00" },
                        { "label": "10000.00" },
                        { "label": "12000.00" },
                        { "label": "14000.00" },
                        { "label": "16000.00" }
                    ]
                }
            ],
            "axis": [
                {
                    "title": "Revenue",
                    "titlepos": "left",
                    "tickwidth": "10",
                    "numberPrefix": "$",
                    "divlineisdashed": "1",
                    "dataset": [
                        {
                            "seriesname": "Revenue",
                            "linethickness": "3",
                            "data": [
                                { "value": "137500" },
                                { "value": "124350" },
                                { "value": "156700" },
                                { "value": "131450" },
                                { "value": "208300" },
                                { "value": "219900" },
                                { "value": "227500" },
                                { "value": "254300" },
                                { "value": "155900" },
                                { "value": "105650" },
                                { "value": "120950" },
                                { "value": "127500" }
                            ]
                        }
                    ]
                }, {
                    "title": "Orders",
                    "axisonleft": "0",
                    "titlepos": "right",
                    "numdivlines": "8",
                    "tickwidth": "10",
                    "divlineisdashed": "1",
                    "dataset": [
                        {
                            "seriesname": "Orders",
                            "data": [
                                { "value": "22567" },
                                { "value": "21348" },
                                { "value": "24846" },
                                { "value": "19237" },
                                { "value": "20672" },
                                { "value": "23403" },
                                { "value": "30278" },
                                { "value": "26719" },
                                { "value": "21940" },
                                { "value": "24396" },
                                { "value": "22340" },
                                { "value": "25439" }
                            ]
                        }
                    ]
                },
                {
                    "title": "Footfalls",
                    "titlepos": "RIGHT",
                    "axisonleft": "0",
                    "numdivlines": "5",
                    "tickwidth": "10",
                    "numberSuffix": "",
                    "divlineisdashed": "1",
                    "dataset": [
                        {
                            "seriesname": "Footfalls",
                            "data": [
                                { "value": "68473" },
                                { "value": "57934" },
                                { "value": "78925" },
                                { "value": "69213" },
                                { "value": "74892" },
                                { "value": "81123" },
                                { "value": "90086" },
                                { "value": "91174" },
                                { "value": "68934" },
                                { "value": "80934" },
                                { "value": "73634" },
                                { "value": "84453" }
                            ]
                        }
                    ]
                }
            ]
        }
    }).render();

});

我还尝试使用XML数据填充字符串,然后执行以下操作:

FusionCharts.ready(function () {
    var hourlySalesChart = new FusionCharts({
        type: 'multiaxisline',
        renderAt: 'chart-container2',
        width: '600',
        height: '350'
});

hourlySalesChart.setXMLData(@Model.strChartData); // - This gives an error : Incorrect Syntax
hourlySalesChart.render();

如果有人能帮助我指出正确的方向,我将非常感激。

谢谢!

0 个答案:

没有答案