用 highstock 做的可视化数据

<html>
<head>
    <title>highstock报表示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src="http://www.wevall.com/data/resource/weiao_js/js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="http://www.wevall.com/data/resource/weiao_js/js/highstock.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

    <!-- 源数据 -->
    <!--<script type="text/javascript" src="./js/usdeur.js"></script>-->
    <script type="text/javascript">
        //图表

            $(function() {
                $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/aapl-c.json&callback=?', function (data) {

            /**
             * highstock数据图表
             *
             * @param {object} chart 图表的相关参数配置
             * @param {object} credits 图表版权信息参数配置
             * @param {object} lang 图表语言参数配置
             * @param {object} exporting 导出配置
             * @param {object} title 标题配置
             * @param {object} xAxis X轴配置
             * @param {array} series 数据源配置
             */
            var chart1 = new Highcharts.StockChart({

                /**
                 * 图表配置
                 *
                 * @param {string} renderTo 图表加载的位置
                 * @param {int} width 图表的宽度
                 * @param {int} hight 图表的高度
                 */
                chart: {
                    renderTo: 'container',
                    // 图表宽度
                    width: 700,
                    // 图表高度
                    hight: 500
                },

                /**
                 * 版权信息配置,不用修改直接复制
                 *
                 * @param {boolean} enabled 是否显示版权信息
                 * @param {string} href 版权信息所链接到的地址
                 * @param {string} text 版权信息所显示的文字内容
                 */
                credits:{
                    enabled: false,
                    href: "http://www.msnui.tk/Admin",
                    text: '微源网络科技'
                },

                /**
                 * 语言配置,不用修改直接复制
                 *
                 * @param {array} months 配置月份语言
                 * @param {array} shortMonths 配置短月份
                 * @param {array} weekdays 配置星期
                 * @param {string} exportButtonTitle 导出按钮的标题文字
                 * @param {string} printButtonTitle 打印按钮的标题文字
                 */
                lang:{
                    months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一', '十二'],
                    weekdays: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                    exportButtonTitle:'导出PDF',
                    printButtonTitle:'打印报表'
                },

                /**
                 * 导出配置,不用修改直接复制
                 *
                 * @param {boolean} enabled 是否允许导出
                 * @param {object} buttons 关于与导出和打印按钮相关的配置对象
                 * @param {string} filename 导出文件的文件名
                 * @param {string} type 默认导出文件的格式
                 */
                exporting:{
                    // 是否允许导出
                    enabled:true,
                    // 按钮配置
                    buttons:{
                        // 导出按钮配置
                        exportButton:{
                            menuItems: null,
                            onclick: function() {
                                this.exportChart();
                            }
                        },
                        // 打印按钮配置
                        printButton:{
                            enabled:false
                        }
                    },
                    // 文件名
                    filename: '报表',
                    // 配置导出接口
                    url: 'http://' + location.hostname + '/test/Highcharts-2.3.2/example/exporting/index.php',
                    // 导出文件默认类型
                    type:'application/pdf'
                },

                /**
                 * 图表的标题
                 *
                 * @param {string} text 图表的标题,如果不需要显示标题,直接设置为空字符串就行
                 */
                title: {
                    text: '图表实例标题'
                },

                /**
                 * 域选择配置
                 *
                 * @param {array} buttons 缩放选择按钮
                 * @param {int} selected 默认选择缩放按钮中的第几个
                 * @param {boolean} inputEnabled 是否允许input标签选框
                 */
                rangeSelector: {
                    // 缩放选择按钮,是一个数组。
                    // 其中type可以是: 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' (year to date), 'year' 和 'all'。
                    // 其中count是指多少个单位type。
                    // 其中text是配置显示在按钮上的文字
                    buttons: [{
                        type: 'month',
                        count: 1,
                        text: '1月'
                    }, {
                        type: 'month',
                        count: 3,
                        text: '3月'
                    }, {
                        type: 'month',
                        count: 6,
                        text: '6月'
                    }, {
                        type: 'year',
                        count: 1,
                        text: '1年'
                    },{
                        type: 'year',
                        count: 3,
                        text: '3年'
                    }, {
                        type: 'all',
                        text: '所有'
                    }],
                    // 默认选择域:0(缩放按钮中的第一个)、1(缩放按钮中的第二个)……
                    selected: 1,
                    // 是否允许input标签选框
                    inputEnabled: false
                },

                /**
                 * 气泡示说明标签
                 *
                 * @param {string} xDateFormat 日期时间格式化
                 */
                tooltip:{
                    // 日期时间格式化
                    xDateFormat: '%Y-%m-%d %A'
                },

                /**
                 * X轴坐标配置
                 *
                 * @param {object} dateTimeLabelFormats x轴日期时间格式化,不用修改直接使用
                 */
                xAxis:{
                    // 如果X轴刻度是日期或时间,该配置是格式化日期及时间显示格式
                    dateTimeLabelFormats: {
                        second: '%Y-%m-%d<br/>%H:%M:%S',
                        minute: '%Y-%m-%d<br/>%H:%M',
                        hour: '%Y-%m-%d<br/>%H:%M',
                        day: '%Y<br/>%m-%d',
                        week: '%Y<br/>%m-%d',
                        month: '%Y-%m',
                        year: '%Y'
                    }
                },

                /**
                 * 数据源配置,本身是一个对象数组
                 *
                 * @param {string} name 数据序列的名称
                 * @param {array} data 数据序列,是一个对象数组。data的结构:[[时间戳, 值], [时间戳, 值], [时间戳, 值], ……]
                 */
                series: [{
                    name: '数据名称',
                    data: data
                }]
            });
            });
        });
    </script>
</head>
<body>
<!--<script src="./js/highstock/highstock.js"></script>-->
<!--<script src="./js/highstock/modules/exporting.js"></script>-->

<div id="container"></div>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值