撸一个highcharts图表

先贴上中文官网:https://highcharts.com.cn/

工具吸引我学习的两个原因:
0、支持IE6+(太厉害了,这么垃圾的浏览器都没有放弃)
1、支持图表导出图片(图片格式包括:png/jpeg/pdf/svg)

注意:本工具非完全免费,仅限个人项目以及非商业用途使用 (产品定价详情: https://highcharts.com.cn/price)

官网的使用教程已经out了,看他介绍已经可以脱离jquery使用了,但是教程上还用的jquery。
所以自己就撸一个吧~~



使用方式:

〇、引入JS文件

官方提供CDN链接:

基础文件 http://cdn.hcharts.cn/highcharts/highcharts.js
导出图片功能 http://cdn.hcharts.cn/highcharts/modules/exporting.js
(PS:我没有找到他中文化JS的CDN地址,就直接把代码地址贴这了:
https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js
要引入下这个文件转换菜单才能变成中文)
(PPS:引入顺序不能颠倒)

一、Hello World

0、造它一个容器

a、创建基础DIV容器:
<div id=”container” style=”min-width:400px;height:400px;”></div>

b、图表配置:

var chart = new Highcharts.Chart('container',{
    //设置属性详情在官网API文档,很齐全
    //文档地址 https://api.hcharts.cn/highcharts
})

1、铛铛铛铛~:

效果图(工具直接生成的图片):
highcharts

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="container" style="min-width:400px;height:400px;"></div>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>

<script>
    var chart = new Highcharts.Chart('container', {
        //标题设置
        title: {
            text: '月平均气温',      //标题名称
            x: 0,                   //X轴方向偏移
            y: 20                   //Y轴方向偏移
        },
        //二级标题设置
        subtitle: {
            text: '信息来自瞎编',
            x: 0,
            y: 40
        },
        //X轴信息
        xAxis: {
            //X轴标题
            //title: {
              //text: '时间',
                //y: 10
            //},
            //X轴内容
            categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        //Y轴信息
        yAxis: {
            //Y轴标题
            title: {
                //默认会旋转90度,但是IE6下不会旋转,IE7+没问题
                text: '温度 (°C)'
            },
            //Y轴线段配置
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            //不写默认为0
            lineWidth: 0
        },
        //数据直接显示
        //plotOptions: {
            //line: {
                //dataLabels: {
                    //enabled: true          // 开启数据标签
                //},
                //enableMouseTracking: false // 关闭鼠标跟踪,对应的提示框、点击事件会失效
            //}
        //},
        //工具提示
        tooltip: {
            //数据单位
            valueSuffix: '°C'
        },
        //图例设置
        legend: {
            layout: 'vertical',   //默认横向排列,可设置为竖向排列
            align: 'right',      //水平方向位置,默认是center,可取值为left/center/right
            verticalAlign: 'middle',  //垂直方向位置,默认是bottom,可取值为top/middle/bottom
            borderWidth: 1
        },
        //数据信息
        series: [{
            //多条数据用name区分
            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]
        }],
        //导出图片设置
        exporting:{
            //设置导出图片格式大小
            width:800,
            //设置导出图片大小,这个建议和容器宽度设置成一个数,保证打印出来的图形和web上的一样
            sourceWidth:800
        },
        //屏蔽右下角的标签
        credits: {
            enabled: false
        }
    })
</script>
</body>
</html>

(题外话:这种代码写作方式很不人性化,有时间会学习下像网页编辑器一样,左侧代码修改、右侧实时效果的工具)

坚持原创技术分享,您的支持将鼓励我继续创作!