Hightcharts 学习

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

weixin_30315723

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

阅读量78

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mchuang/p/4265703.html

本文详细介绍了Highcharts图表的基本组成部分，包括标题、坐标轴、数据列等，并解释了如何修改图表背景色及线条颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Highcharts主要组成

通常情况下，Highcharts包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权信息（Credits）等，高级的还包括导出功能按钮（Exporting）、标示线（PlotLines）、标示区域（PlotBands）等。

Highcharts基本组成部分如下图所示

图2-1 Highcharts基本组成部分

Highcharts主要组成

Title

图表标题，包含标题和副标题（subTitle），其中副标题是非必须的。

Axis

坐标轴，包含x轴（xAxis）和y轴（yAxis）。通常情况下，x轴显示在图表的底部，y轴显示在图表的左侧。多个数据列可以共同使用同一个坐标轴，为了对比或区分数据，Highcharts提供了多轴的支持。

Series

数据列。图表上一个或多个数据系列，比如曲线图中的一条曲线，柱状图中的一个柱形。

Tooltip

数据提示框。当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值，数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定。

Legend

图例。用不同形状、颜色、文字等标示不同数据列，通过点击标示可以显示或隐藏该数据列。

Credits

图表版权信息。显示在图表右下方的包含链接的文字，默认是Highcharts官网地址。通过指定credits.enabled=false即可不显示该信息。

Exporting

导出功能按钮。通过引入exporting.js即可增加图表导出为常见文件功能。

PlotLines

标示线（或辅助线）。可以在图表上增加一条标示线，比如平均值线，最高值线等。

PlotBands

标示区域（分辨带）。可以在图表添加不同颜色的区域带，标示出明显的范围区域。

修改背景色

$('#container').highcharts({
chart: {
type: 'line',
backgroundColor: 'rgba(0,0,0,0)',  //在这设置背景颜色
color: '#fff'
},

  yAxis: {
                    labels:
                      {
                          style:
                              {
                                  fontSize:'25px',
                                  color: '#fff'
                              }
                      }, //这里设置字体大小和颜色

 exporting:
                {
                    enabled:false, //默认为可用，当设置为false时，图表的打印及导出功能失效
                    },
                credits:{
                enabled:false // 禁用版权信息
                },

　　线条的颜色怎么改呢？？默认的第一个就是蓝色

线条的颜色需要在hightcharts.js中修改搜索colod 找到一个颜色的数组，就是代表了默认的线条颜色

转载于:https://www.cnblogs.com/mchuang/p/4265703.html