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轴值，即结果[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;
     }
}

<强> REF：http://api.highcharts.com/highcharts#tooltip.formatter

WORKING DEMO ON 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)

Highcharts中的工具提示

2 个答案: