Highcharts在工具提示上显示负值

时间:2018-04-06 08:33:27

标签: angularjs highcharts

我已将 min:0设置为y轴。但是在工具提示中我也希望显示负值,并且它也应该从值y = 0开始。

如果我将在y轴上移除min:0,它将在图表中显示工具提示的负值。但我只想在工具提示上看到负值,而不是在图表上。

但它不允许我显示负值。

以下是示例代码。

$(id).highcharts({
    chart: {
        zoomType: 'xy',
        marginLeft: 45,
        marginRight: rightval - 10


    },
    title: { text: title },
    exporting: { enabled: false },
    credits: { enabled: false },
    legend: { enabled: false, align: 'left', x: 10, verticalAlign: 'bottom', y: 3, shadow: false },
    xAxis: {
        min: minimum,
        max: maximum,
        scrollbar: {
            enabled: scroobarVal
        },
        fontWeight: 'bold',
        categories: Data['categories'],

        labels: {
            y: 20,
            rotation: 0,

            style: {
                color: 'gray',
                //fontSize:'1px !important;'
            }

        }

    },

    yAxis: [{
        min: 0,
        allowDecimals: false,
        endOnTick: false,
        gridLineWidth: 0,
        labels: {
            formatter: function () {

                if (optionSelected == 'Day') {
                    return this.value;

                } else {

                    return this.value / 1000000 + 'M';
                }
            },
            style: {
                color: '#767676'
            }
        },
        offset: -10,
        title: {
            text: 'Inv ' + val_qty,
            "textAlign": 'top',
            "rotation": 0,
            x: 60,
            y: yaxisVal,
            style: {
                color: '#767676',
                fontWeight: 'bold'
            }
        }
    }, {
        allowDecimals: false,
        min: 0,
        endOnTick: false,
        gridLineWidth: 0,
        title: {
            text: y2axisname,
            "textAlign": 'top',
            "rotation": 0,
            x: -75,
            y: yaxisVal,
            style: {
                color: '#767676',
                fontWeight: 'bold'
            }
        },
        offset: -10,
        labels: {
            format: '{value}',
            style: {
                color: '#767676'
            }
        },
        opposite: true
    }],
    labels: {
        items: [{
            html: ' ',
            style: {
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        }]
    },
    tooltip: {

        style: { fontSize: '7pt' },
        formatter: function () {
            var s = '<b>' + this.x + '</b>';

            $.each(this.points, function (i, point) {


                    s += '<br/><span style="color:' + point.series.color + '">\u25CF</span> ' + point.series.name + ': <b>' + CurrencySymbol + '</b>' + point.y.toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ", ");


            });

            return s;
        },
        shared: true
    },
    series: Data['series'],
});

1 个答案:

答案 0 :(得分:0)

我认为在Highchart上有一种简单的方法可以做到这一点。 我找到的一种hacky方式(不要评判我!)是有一个“幽灵”系列并将tooltip.shared选项设置为true。

在此处查看:http://jsfiddle.net/arryx9rf/