基于Highcharts的图表绘制

来源：互联网发布：金和网络陈耀泉编辑：程序博客网时间：2024/06/08 14:18

图表绘制

使用Highcharts进行图表绘制相当简单，且官方文档也非常详细。由于Highcharts是在Jquery基础上开发的，所以得提前引入Jquery，为了简便，所有需要引入的文件直接从bootsrtp的 CDN 库中引入。
下面是两个案例：
这里写图片描述

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>无标题</title>    <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>    <script src="http://cdn.bootcss.com/highcharts/5.0.7/highcharts.js"></script></head><body><div id="container" style="width:auto; height:auto;"></div><script type="text/javascript">$(function () {    $('#container').highcharts({        chart: {            type: 'column',            inverted: true,             borderWidth: 0,        },        title: {            text: '视频使用情况条形图'        },        subtitle: {            text: '时间：2017-01-01 ~ 2017-03-02'        },        xAxis: {            type: 'category',            labels: {                style: {                    fontSize: '12px',                    fontFamily: 'Verdana, sans-serif'                }            },            title: {                text: '视频类型'            }        },        yAxis: {            min: 0,            title: {                text: '使用次数'            }        },        legend: {            enabled: false        },        series: [{            name: '播放次数：',            data: [                ['小鸟', 237],                ['海豚', 161],                ['猫头鹰', 142],                ['刺猬', 140],                ['蜗牛', 125],                ['小鸡', 121]            ],            dataLabels: {                enabled: true,                color: '#FFFFFF',                align: 'right',                y: 10, // 10 pixels down from the top                style: {                    fontSize: '13px',                    fontFamily: 'Verdana, sans-serif'                }            }        }],        credits :{            href : 'http://www.findme.wang',            text : '版权所有：dq'        },        exporting : false    });});</script></body></html>

这里写图片描述

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>无标题</title>    <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>    <script src="http://cdn.bootcss.com/highcharts/5.0.7/highcharts.js"></script></head><body><!-- https://api.hcharts.cn/highchartshttps://www.hcharts.cn/demo/highcharts/bar-basic --><div id="container"></div><script type="text/javascript">$(function () {    $('#container').highcharts({        chart: {            type: 'spline',             borderWidth: 0,            inverted: true, //是否翻转坐标轴        },        title: {            text: '视频使用情况'        },        subtitle: {            text: '时间：2016-08-03  ~  2016-10-03 '        },        xAxis: {            'type' : 'category',            reversed: false,            title: {                enabled: true,                text: '游戏名称'            },            categories : ['小鸟', '海豚','猫头鹰', '刺猬','蜗牛', '小鸡'],            showLastLabel: true,        },        yAxis: {            allowDecimals: false,            title: {                text: '使用次数(单位/次)'            },            plotLines: [{                value: 0,                width: 1,                color: '#808080'            }]        },        legend: {            enabled: false        },        series: [{            name: '播放次数：',            data: [10,23,50,13,26,10]        }],        credits :{            href : 'http://www.findme.wang',            text : '版权所有：dq'        },        exporting : false    });});</script></body></html>

补充

官方api：https://api.hcharts.cn/highcharts
里面包含了很多参数详细的描述
官方案例：
https://www.hcharts.cn/demo/highcharts/bar-basic

1 0