highcharts的使用与配置

最新推荐文章于 2021-11-06 23:28:53 发布

lican_2017

最新推荐文章于 2021-11-06 23:28:53 发布

阅读量1.4k

点赞数

分类专栏：学习笔记前端文章标签： highcharts 前端后端 javascript

本文链接：https://blog.csdn.net/lican_2017/article/details/79636582

版权

学习笔记同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

介绍：
Highcharts 系列软件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库，全部源码开放，个人及非商业用途可以任意使用及源代码编辑。中文网地址 https://www.hcharts.cn/docs/start-introduction

Highchartsa：基本图表其主要包含直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等20多种图表。

Highstock：股票图表控件包含多个高级导航组件（预设置数据时间范围，日期选择器、滚动条、平移、缩放功能）

Highmaps：优秀地图组件它可以方便快捷的创建用于展现销售、选举结果等其他与地理位置关系密切的交互性地图图表。

Highchartsa使用：
下载官方资源包或直接引入CDN文件
CDN引入如下

<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

创建容器并指定大小供后续操作

<div id="container" style="width:400px;height:400px"></div>

通过highcharts.chart函数来创建图表，highcharts.chart函数有两个参数第一个参数是容器的id，第二个则是图表配置信息。
代码如下

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<script src="highcharts.js"></script>
<script src="JQuery.js"></script>
<body>
<div id="container" style="width:400px;height:400px"></div>

<script type="text/javascript">
// 图表配置
var options={
    //去除生成后的图表水印链接
     credits: { enabled: false },
    chart:{
        type:"bar"  //指定图表的类型，默认是折线图（line）
    },
     title: {
                text: '我的第一个图表'                 // 标题
            },
            xAxis: {
                categories: ['苹果', '香蕉', '橙子']   // x 轴分类
            },
            yAxis: {
                title: {
                    text: '吃水果个数'                // y 轴标题
                }
            },
            series: [{                              // 数据列
                name: '小明',                        // 数据列名
                data: [1, 0, 4]                     // 数据
            }, {
                name: '小红',
                data: [5, 7, 3]
            }]
};
var chart=Highcharts.chart("container",options);
</script>
</body>
</html>

Highstock与Highmaps后续会讲

lican_2017

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
highcharts的使用与配置

介绍： Highcharts 系列软件包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库，全部源码开放，个人及非商业用途可以任意使用及源代码编辑。中文网地址https://www.hcharts.cn/docs/start-introductionHighchartsa：基本图表其主要包含...
复制链接

扫一扫