半岛权威十大直营(官方)网站

准备工作：

• 下载Highcharts
• Highcharts中文介绍

颜色

说明： 数据节点独立的颜色

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

        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, {
                y: 216.4,
                color: '#BF0B23'
            }, 194.1, 95.6, 54.4]
        }]
    });
});

数据标签

说明： 数据节点独立的数据标签。此选项与plotOptions.series.dataLabels一致。

$(function () {
    $('#container').highcharts({

        chart: {
            marginRight: 50
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, {
                dataLabels: {
                    enabled: true,
                    align: 'left',
                    style: {
                        fontWeight: 'bold'
                    },
                    x: 3,
                    verticalAlign: 'middle',
                    overflow: true,
                    crop: false
                },
                y: 54.4
            }]
        }]

    });
});

事件

说明 数据节点独立的事件。

id

说明： 数据节点的id。在图表渲染之后可以快速的通过chart.get()从数据节点对象中获取此数据节点。

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

        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, {
                y: 216.4,
                id: 'highest'
            }, 194.1, 95.6, 54.4]
        }]
    });

    // button handler
    $('#button').click(function () {
        var chart = $('#container').highcharts(),
            highest = chart.get('highest');
        if (highest) {
            highest.remove();
        }
    });
});