Highcharts 组件分析

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地址

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值