準備工作：

• 下載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();
        }
    });
});