準(zhǔn)備工作：

• 下載Highcharts
• Highcharts中文介紹

顏色

說明： 數(shù)據(jù)節(jié)點(diǎn)獨(dú)立的顏色

$(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]
        }]
    });
});

數(shù)據(jù)標(biāo)簽

說明： 數(shù)據(jù)節(jié)點(diǎn)獨(dú)立的數(shù)據(jù)標(biāo)簽。此選項(xiàng)與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
            }]
        }]

    });
});

事件

說明 數(shù)據(jù)節(jié)點(diǎn)獨(dú)立的事件。

id

說明： 數(shù)據(jù)節(jié)點(diǎn)的id。在圖表渲染之后可以快速的通過chart.get()從數(shù)據(jù)節(jié)點(diǎn)對(duì)象中獲取此數(shù)據(jù)節(jié)點(diǎn)。

$(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();
        }
    });
});