高图分组列,隐藏在工具提示中

时间:2018-11-11 20:49:47

标签: javascript highcharts

我在高图表中使用分组列,我只需要在工具提示中显示用法列(shared:true)。但是我看到所有分组列http://jsfiddle.net/8o6umxdp/,我只想查看此字段中列的值,而不是分组。我正在隐藏此图例“ showInLegend:false”,但此图例显示在工具提示中。

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    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:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0,
            grouping: true
        }
    },
    series: [ {
        name: 'Tokyo',
        data: [0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0],
        grouping: 'tok',
        showInLegend: false

    }, {
        name: 'Tokyo',
        data: [1, 0, 3, 0, 4, 0, 0, 0, 0, 0, 0, 0]

    }, {
        name: 'New York',
        data: [0, 0, 0, 0, 33, 0, 0, 0, 0, 0, 0, 0],
        grouping: 'mew',
        showInLegend: false
    }, {
        name: 'New York',
        data: [80, 0, 0, 42, 23, 0, 0, 0, 0, 0, 0, 0],

    }, {
        name: 'London',
        data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

    }, {
        name: 'Berlin',
        data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

    }]
});

want to hide this tooltip in charts

但是这里只有柏林和伦敦,如何隐藏东京和纽约

1 个答案:

答案 0 :(得分:1)

您可以将pointFormat替换为pointFormatter,并用Series.showInLegend进行过滤。

例如(JSFiddle):

// ...
tooltip: {
    pointFormatter: function() {
        if(this.series.options.showInLegend !== false)
            return '<tr><td style="color:'+this.series.color+';padding:0">'+this.series.name+': </td><td style="padding:0"><b>'+this.y.toFixed(1)+' mm</b></td></tr>';
    }
}

这应该模仿您的pointFormat样式,但允许更多动态包含。