从SQL数据库中

时间:2016-07-07 04:02:26

标签: javascript highcharts

您好我正在创建一个从SQL读取数据并在ASP.net中显示图表的仪表板。

    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]

    }]

例如,我的数据来自SQL,我创建了一个数组来获取每行的每个数据myarray = [name,data1,data2,data3,.....,data12]

这就是我获取数据的方式

     <script>
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "myService.asmx/CBPmethod",
            data: "{}",
            dataType: "json",
            success: function (Result) {
                Result = Result.d;
                var data = [];
                var mydata = new Array();
                for (var i=0 in Result) {
                    var serie = new Array(Result[i].Metric, Result[i].Nov15, Result[i].Dec15, Result[i].Jan16, Result[i].Q1, Result[i].Feb16, Result[i].Mar16, Result[i].Apr16, Result[i].Q2, Result[i].May16, Result[i].Jun16, Result[i].Jul16, Result[i].Q3, Result[i].Aug16, Result[i].Sep16, Result[i].Oct16, Result[i].Q4);
                    data.push(serie);
                }
               DrawChart(data);
            },
            error: function (Result) {
                alert("Error");
            }
        });
    });


    function DrawChart(series1) {

        $('#container110').highcharts({

            chart: {
                type: 'column'
            },
            title: {
                text: 'Test'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            credit: {
                enabled: false
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                data: series1
            }]
        });
    }
</script>

如何在highcharts中为系列创建循环以动态显示柱形图?

谢谢!

0 个答案:

没有答案