javascript - 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: {
     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

WORKING DEMO ON JSFIDDLE

快乐编码:)