HighCharts绘制图表

    <div id="TradeMoney"></div>
    <script>
        $(function () {
            initData();
        });

        function initData() {

           var chart1 = new Highcharts.Chart({
                chart: {
                    renderTo: 'TradeMoney',          //放置图表的容器
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    defaultSeriesType: 'line',
                    reflow: true //默认为true 所以可以不配置
                },
                title: {
                    text: '订单金额曲线'
                },
                subtitle: {
                    text: ''
                },
                xAxis: {//X轴数据
                    categories: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06', '2015-07', '2015-08', '2015-09', '2015-10'],
                    labels: {
                        rotation: -45, //字体倾斜
                        align: 'right',
                        style: { font: 'normal 13px 宋体' }
                    }
                },
                yAxis: {//Y轴显示文字
                    title: {
                        text: '订单金额/元'
                    }
                },
                tooltip: {
                    enabled: true,
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 1);
                    }
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: true//是否显示title
                    }
                },
                series: [{
                    name: '总金额',
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 19.4, 0]

                }, {
                    name: '成功金额',
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 10.3, 0]

                }, {
                    name: '失败金额',
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                }]
            });
        }
    </script>

注意:

1、数据格式要一致,X轴['a','b','c','d'],Y轴[0,0,0,3],可以在后台进行字符串拼接value="["+....+"]",然后在前台转换成对象eval(value);

2、highcharts.js版本一定要与JQuery对应,否则会出现首次加载有数据无折线,只有拖动窗体改变其大小后才显示折线,坑惨了,切记;

3、显示图表的div容器的高和宽如果未指定,将默认是400*400。

你可能感兴趣的:(HighCharts绘制图表)