zoukankan      html  css  js  c++  java
  • 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。

  • 相关阅读:
    wireshark 导出所有filter出来的包
    ubuntu 14.04安装pypcap
    激活windows7 企业版小记
    ubuntu 14.04 以root权限启动chrome
    git clone Linux 源码并切换TAG
    ubuntu 14.04 ns2.35 ***buffer overflow detected **: ns terminated解决办法
    我离baidu.com有几跳
    linux tcp超时重传实现分析
    dpctl 工具使用
    由于log太多导致ubuntu硬盘空间满了,进入不了系统解决办法
  • 原文地址:https://www.cnblogs.com/len0031/p/4864428.html
Copyright © 2011-2022 走看看