Highcharts 组件分析

最新推荐文章于 2025-02-21 17:25:07 发布

原创最新推荐文章于 2025-02-21 17:25:07 发布 · 置顶 · 824 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#工具 #Highcharts #图

Highcharts 专栏收录该内容

1 篇文章

订阅专栏

Highcharts是一款纯JavaScript的数据可视化工具，适用于Web项目的数据展示。它提供了丰富的图表类型，包括折线图、柱状图等，并可通过JSON配置进行个性化设置。本文介绍了Highcharts的基本组件及其属性。

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

Highcharts 是一个纯Js编写的用于数据可视化的工具。适合为web项目提供数据呈现，使用起来非常方便，只需要引入js包即可，而且功能很全面。具有各种样式的图表，常规的有折线图，柱状图，饼状图，散点图，复杂一些的有仪表图，温度计图等等。可以查阅在线demo寻找想要的图。Demo 大全

Highcharts 组件定义在一个 options 对象中，推荐使用易读的Json格式填写，而不是用C-type语言的方式写。
//好
chart: {
renderTo: ‘container’,
type: ‘bar’
}
//不好
options.chart = new Object();
options.chart.renderTo = ‘container’;
options.chart.type = ‘bar’;

完整例子：

$(document).ready(function() {
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});

其中使用.(dot)访问和使用数组访问效果是一样的，也就说options.type = options[‘type’]

Highcharts中有几个核心组件，每个组件都有一系列属性，从而可以实现个性化定义，均是直接在上面的代码中，在相应的组件代码块内，使用键值对的方式定义，键是属性名，值是参数数值。如直接在yAxis中添加 tickInterval: 1 就可以定义y轴数值间隔为1。

组件说明

Title: 标题，呈现在图标的正上方，常见的是定义标题和副标题（默认没有）。

Axes: x轴和y轴，这里能定义的属性就非常丰富了，常见的有定义2个y轴，坐标轴的每一格的跨度是多少，轴数值的起始值定义，最大值最小值，定义轴的名称(label属性)等。支持数字，字符串，时间类型。

Series: 是Highcharts渲染的数据源，数据可以多组，每一组都可以定义各自的名称，其中数据放在数组中。数组值可以一维，比如[1,2,3,4,5]，表示y轴的值,x轴需要在xAxis定义好；也可以是二维的数组，如[[1,1], [2,2], [3,3], [4,4], [5,5]]。还可以指定数据y轴属于哪一侧。还有就是可以指定颜色和用哪一种图呈现数据，常见的有column, line等。

Legend: 呈现series中的数据，类似于开关，可以选择是否呈现这一组数据。常见的用法可以定义legend的呈现位置，左侧，右侧等。

Tooltip: 控制当鼠标移动至数据点上，显示框中的内容显示。这个组件功能非常详细，可以深度定制，比如定义呈现的样式(html)，还可以对数据点做一些计算，主要是通过重写tooltip的formatter方法实现。下次另写一篇来讲一讲如何实现tooltip的自定义。

以上是Highcharts简单的介绍，当我们在使用过程中，根据自己需要就可以查询组件文档找到相应的属性。总体来说，Highcharts自定义还是非常方便的，使用起来也不是很难，有一些js基础就可以。

参考资料： Highcharts官方文档 doc地址

完