HighCharts初学_______(2)

最新推荐文章于 2025-05-14 14:41:23 发布

小星_day

最新推荐文章于 2025-05-14 14:41:23 发布

阅读量1.2k

点赞数

分类专栏： HighCharts研究学习文章标签： javascript highcharts js图表

本文链接：https://blog.youkuaiyun.com/xingxing1828/article/details/17710323

版权

HighCharts研究学习专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了HighCharts中数据列的定义与使用方法，包括不同数据格式的应用、数据标签的设置、线宽与虚线样式调整等，并展示了如何实现图表元素的选择与计数。

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

由于现在HighCharts的中文文档，很少，翻译的模块目前也很少

而我的英文半吊子水平。。。。。。

因而，可能有很多东西，自己理解都不够。。

期望有英文大神，能够帮忙翻译highCharts的帮助文档等等，便于他人学习和使用！

1、Series：

Series可以理解为数据列。所有在图表中绘制的点或图形，都是根据这个数据列对象得来的，这个数据列对象有下面这个结构：

series: [{
    name: ''
    data: []
}]

这个对象，是一个数组，意味着可以包含有许多的数据列

而name的值，指的是，在鼠标移动到图表或者列上面时，展示的浮层的Name

设置这个列的参数：

a、数据：

数据的格式是一个数组的格式，但是数据的属性，可以通过三种方式展示：

1）一串数字，这串数字是用来表示一系列y的值，而x的值会通过计算，要么从0开始，以1定增，或者依据你所给的一个Interval的值，从开始到结束

data: [0, 5, 3, 5]

$(function () {
    $('#container').highcharts({
        chart: {
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

展示效果为：

2）一系列包含两个值的数组，这个意味着，第一个值是x的值，第二个值是y的值：

如果第一个值是string，那么这个就值得是name

data: [[5, 2], [6, 3], [8, 2]]

$(function () {
    $('#container').highcharts({
        chart: {
        },
        xAxis: {
            minPadding: 0.05,
            maxPadding: 0.05
        },
        
        series: [{
            data: [
                [0, 29.9], 
                [1, 71.5], 
                [3, 106.4]
            ]
        }]
    });
});

3)、一系列带有name和value的对象，这个从表面上好理解，使用应该也最广泛：

data: [{
    name: 'Point 1',
    color: '#00FF00',
    y: 0
}, {
    name: 'Point 2',
    color: '#FF00FF',
    y: 5
}]

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },

        xAxis: {
            categories: ['Green', 'Pink']
        },

        series: [{
            data: [{
                name: 'Point 1',
                color: '#00FF00',
                y: 1
            }, {
                name: 'Point 2',
                color: '#FF00FF',
                y: 5
            }]
        }]
    });
});

点和标记：

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5,
          { y: 216.4, color: '#BF0B23'}, 194.1, 95.6, 54.4]
}]

在216.4这个值得时候，给予特殊的标志：

总的来说：

数据列被定义在两个地方：

1、总体的多数据列，被定义在plotOptions，要设置所有数据列的属性，plotOptions.series

2、对单个的数据列而言，可以在数据列定义的时候，赋予它属性。

允许ctrl+鼠标的方式，选中绘制的图表的节点，然后通过函数可以获取到选择的节点的个数：

getSelectedPoints

$(function () {
    $('#container').highcharts({
        chart: {
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
    
    
    // the button action
    $('#button').click(function() {
        var chart = $('#container').highcharts(),
            selectedPoints = chart.getSelectedPoints();
        alert ('You selected '+ selectedPoints.length +' points');
    });
});

要打开可选择的开关：

plotOptions: {
    series: {
        allowPointSelect: true
    }
}

获取选择节点个数的函数：

var selectedPoints = chart.getSelectedPoints();

绘制线性图表时候，可以设置线的粗细度：

series: [{
    data: [216.4, 194.1, 95.6],
    lineWidth: 5}],

数据标签：

plotOptions: {
    line: {
        dataLabels: {
            enabled: true
        }
    }
},

设置dashStyle为longdash，可以使得线性图表为虚线

series: [{
    data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],
    dashStyle: 'longdash'
}]