Highcharts中的工具提示

Question

我有一個繪制柱狀圖的函數。 我想在工具提示中添加其他信息。

這是我的功能

function arm_bar_graph(result){

    $('#arms_graph').highcharts({
        chart: {
            type: 'column',
            backgroundColor : '#fafafa',
            height : 300,
        },
        title: {
            text: 'Load Per Arm / Open Shipments'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: result[0],
            labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        credits: {
            enabled: false
        },
        series: [{
            data: result[1],
            name : 'Open Shipments',
        },
        ]
    });
}

結果是

[
    [
        u'Arm1',
        u'Arm10',
        u'Arm2',
        u'Arm3',
        u'Arm4',
        u'Arm5',
        u'Arm6',
        u'Arm7',
        u'Arm8',
        u'Arm9'
    ],
    [
        10,
        8,
        9,
        7,
        6,
        5,
        4,
        3,
        2,
        1
    ],
    {
        u'Arm10': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 40,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.'
        },
        u'Arm8': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 24,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.'
        },
        u'Arm9': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 19,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.'
        },
        u'Arm6': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 0,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': '1970-01-0100: 00: 00+00: 00'
        },
        u'Arm7': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 22,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.'
        },
        u'Arm4': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 0,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': '1970-01-0100: 00: 00+00: 00'
        },
        u'Arm5': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 24,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.'
        },
        u'Arm2': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 10,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.'
        },
        u'Arm3': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 24,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.'
        },
        u'Arm1': {
            'bags_closed_per_arm': 0,
            'total_pptls_per_arm': 40,
            'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.',
            'total_shipments_per_arm': 0,
            'bags_open_per_arm': 0,
            'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.'
        }
    }
]

我想向結果提供的詞典中包含的工具提示添加更多信息。 我怎樣才能做到這一點？ 當前，工具提示顯示Y軸值，即result [1]值。

如何從字典中添加值？

Answer 1

您可以使用tooltip.formatter回調來完成

ToolTip格式化程序回調代碼：

tooltip: {
     formatter: function() {
          return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>, in series '+ this.series.name;
     }
}

參考： http : //api.highcharts.com/highcharts#tooltip.formatter

在JSFIDDLE上進行演示

快樂編碼:)

Answer 2

通過遵循@dreamweiver示例http://api.highcharts.com/highcharts#tooltip.formatter

我需要以下內容，因為我的this.x顯示為一個巨大的數字，例如1395187200000現在愉快地顯示為2014年2月6日，星期四

Highcharts.dateFormat('%A, %b %e, %Y', this.x)