highcharts 图表生成

最近在项目中用到了图表插件,用的是highcharts插件中的曲线和饼图代码, 现在总结一下它的使用方法,方便各位少走弯路.

废话不多少,先看第一幅效果图

上幅图中暂时表示了6处地点,我们暂时来解析下这6处地点怎么改

标识 1  图表的标题

标识 2  图表的副标题

标识 3  图表的导出

标识 4  图例说明

标识 5  版权

标识 6 信息提示框(鼠标点击或触摸显示)

先贴代码 上来

/**
     * Highcharts 在 4.2.0 开始已经不依赖 jQuery 了，直接用其构造函数既可创建图表
     *
     */
    var chart = new Highcharts.Chart('container', {
        title: {
            text: '不同城市的月平均气温',        // 图1 .  图表的标题
            x: -20                                // 标题位置
        },
        subtitle: {
            text: '数据来源: WorldClimate.com',    // 图2 . 图表的副标题
            x: -20
        },
        xAxis: {                                // X 坐标数据
            categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {                                // Y 坐标数据
            title: {                            // Y 坐标标题
                text: '温度 (°C)'
            },
            /**
            plotLines: [{
                className:
                color: undefined
                dashStyle: 线条样式
                events: 事件
                id: 编号
                label: {标签}
                value: 值
                 宽度
                zIndex: 层叠
                }]
            */
            plotLines: [{                        // 标识线    
                value: 0,                        
                 1,
                color: '#808080'
            }]
        },
        tooltip: {                                // 图6. 提示框     文档地址  https://api.hcharts.cn/highcharts#tooltip
            valueSuffix: '°C'                    // 数值后缀
        },
        legend: {                                // 图4. 图例    文档地址  https://api.hcharts.cn/highcharts#legend            
            layout: 'vertical',                    // 图例布局   horizontal(水平)  vertical(垂直)
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0,
            enabled: true                        // 图例开关(默认显示图例  但是一般在手机上面不显示图例  则 应该为 false)    
        },
        /**
            credits: {
                enabled: 启用
                href: 链接
                position: {位置}
                style: 样式
                text: 内容
            }
        */
        credits:{                                // 图5. 版权信息  文档地址 https://api.hcharts.cn/highcharts#credits            
            enabled: true    
        },
        exporting:{
            enabled: true                        // 图3. 导出图表  文档地址 https://api.hcharts.cn/highcharts#exporting    
        },
        series: [{
            name: '东京',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: '纽约',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: '柏林',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: '伦敦',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });

一般情况下,标识 2、3、4、5 不需要， 所以

副标题代码

 subtitle: {
     text: '数据来源: WorldClimate.com',    // 图2 . 图表的副标题
      x: -20
},

这一段 可以去掉

标识 3、4、5 因为默认是true  所以需要 改为 false 

可以看一下效果

 现在是不是可以了 OK

可以看到提示框 有个 七月 纽约时间等 , 有时候我们需要把七月 改成 xxx七月 也不需要换行, 那我们可以这样改

 tooltip: {                                
     valueSuffix: '°C',                    // 数值后缀
     headerFormat: '<div style="text-align: center">当前月份:{point.key}</div><br/>',
},

如果不需要换行的话 , 把后面的<br/> 去掉就行

再来看下效果

大家可以看下官方文档上面的:https://api.hcharts.cn/highcharts#exporting 

讲的非常清晰