【问题标题】:Highcharts Showing negative values on tooltipHighcharts 在工具提示上显示负值
【发布时间】:2018-04-06 08:33:26
【问题描述】:

我在 y 轴上设置了 min:0。但在工具提示中,我也想显示负值,而且它应该仅以值 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'],
});

【问题讨论】:

  • 我认为您需要删除 y 轴上的 min : 0 。请参考这个...stackoverflow.com/questions/16417124/…
  • 可以,但我希望它以 y=0 开头
  • 你能用整个 highcharts 代码更新你的帖子吗?
  • 我已经更新了整个 highchart 功能。
  • 使用tooltip.formatter - 您可以检查回调中的任何条件,并且您可以访问所有图表的数据。

标签: angularjs highcharts


【解决方案1】:

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

在这里查看:http://jsfiddle.net/arryx9rf/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-07-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-09-27
    • 1970-01-01
    相关资源
    最近更新 更多