HighCharts從數據庫中讀取數據

1.index.jsjavascript

router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
});
router.get('/value', function(req, res, next) {
    var sql="select * from [dbo].[highcharts]";
    dbHelper.querySql(sql,"", function(err,resulte){
        if(!err){
            console.dir(resulte);
            res.json({ dateSet: resulte});
        }
    });
});

2.index.htmlhtml

 

    <script type="text/javascript" src="/javascripts/jquery.js"></script>
    <script type="text/javascript" src="/javascripts/HighCharts.js"></script>
    <title></title>
</head>
<script type="text/javascript">
    $(function () {
        var dataMoths=[];
        var dataValue=[];
        jQuery.ajax({
            type: "get",
            url: "/value",
            dataType: "json",
            success: function(data) {
                for(var i=0;i<data.dateSet.length;i++){
                    dataMoths.push(data.dateSet[i].month);
                    dataValue.push(data.dateSet[i].value);
                }
//                alert(dataMoths);
                $('#container').highcharts({
                    title: {
                        text: 'Monthly Average Temperature',//標題
                        x: -20 //center 設置標題的位置
                    },
                    subtitle: {
                        text: 'Source: WorldClimate.com', //副標題
                        x: -20 //副標題位置
                    },
                    credits:{//右下角的文本
                        enabled: false,
                        position: {//位置設置
                            align: 'right',
                            x: -10,
                            y: -10
                        },
                        href: "http://www.highcharts.com",//點擊文本時的連接
                        style: {
                            color:'blue'
                        },
                        text: "Highcharts Demo"//顯示的內容
                    },
                    xAxis: {//橫軸的數據
                        categories: dataMoths
                    },
                    yAxis: {//縱軸的數據
                        title: {
                            text: 'Temperature (°C)'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                        }]
                    },
                    tooltip: {//鼠標移到圖形上時顯示的提示框
                        valueSuffix: '°C'
                    },
//                    /*配置數據點選項*/
//                    plotOptions: {
//                        spline: {
//                            marker: {
//                                enabled: false
//                            }
//                        },
//                        line: {
//                            dataLabels: {
//                                enabled: false
//                            },
//                            enableMouseTracking: true
//                        },
//                        series: {
//                            marker: {
//                                enabled: false
//                            }
//                        }
//                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        enabled: false,//去掉右邊的 name
                        borderWidth: 0
                    },
                    series: [{
                        name: 'London',
                        data:dataValue
                    }]
                });
            }
        });


    });
</script>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

 

3.結果java

相關文章
相關標籤/搜索