Highcharts 条形图学习笔记

什么是 Highcharts

Highcharts 是一款基于 JavaScript 的图表库，使用者可以利用它来将数据通过图表的形式展现出来，使得数据更加易于理解和分析。其中包括了多种类型的图表，如折线图、柱状图、饼图等等。本文将会介绍如何使用 Highcharts 制作条形图。

Highcharts 条形图实例

以下为利用 Highcharts 制作条形图的实例代码：

javascriptCopy Code
Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: '月销售额'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月']
    },
    yAxis: {
        min: 0,
        title: {
            text: '销售额 (元)'
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: '线上销售',
        data: [12000, 15000, 20000, 18000, 22000, 25000]
    }, {
        name: '门店销售',
        data: [10000, 11000, 12000, 13000, 14000, 15000]
    }]
});

以上代码会生成一个条形图，该图展示了一家商店在六个月中的线上销售额和门店销售额。其中，X 轴表示月份，Y 轴表示销售额，图例分别对应线上销售和门店销售。

Highcharts 条形图参数解释

上述代码中有许多参数，以下为这些参数的解释：

chart

该参数指定了图表的类型，如上例中的条形图（type: 'bar'）。

title

该参数指定了图表的主题。在本例中，主题被设置为“月销售额”。

xAxis

该参数指定了 X 轴的刻度。在本例中，X 轴被划分成了六个月份。

yAxis

该参数指定了 Y 轴的刻度。在本例中，Y 轴的最小值被设置为 0，并且 Y 轴被标记为“销售额 (元)”。

legend

该参数指定了图例的位置，默认位于图表的右上方。在本例中，图例被反转（reversed: true）。

plotOptions

该参数指定了绘图选项。在本例中，整个图表被堆叠起来（stacking: 'normal'），表示两个数据系列的值将被累加到一起。

series

该参数指定了数据系列。在本例中，有两个数据系列，分别为线上销售和门店销售。每个数据系列有六个值，分别对应六个月份的销售额。

总结

Highcharts 是一款强大的图表库，它可以帮助用户通过图表的形式展示数据。在本文中，我们介绍了如何使用 Highcharts 制作条形图，并给出了一个实例。如果你需要展示数据，但是又不希望让数据显得单调和枯燥，那么 Highcharts 就是一个不错的选择。