【问题标题】:Show N/A in datalabels, when value is null - Highcharts当值为空时,在数据标签中显示 N/A - Highcharts
【发布时间】:2015-03-03 21:09:58
【问题描述】:

当数据为空时,我想在柱形图中显示“N/A”。 这就是我目前正在尝试做的事情: http://jsfiddle.net/90amxpc1/1/

dataLabels: {
                formatter: function () {
                    if (this.y == null) {
                        return "N/A";
                    }
                    else {
                        return this.y;
                    }
                }
}

但是,它不起作用。我想要实现的目标类似于此问题的公认答案: Highcharts: Returning N/A value instead of 0% in data label 或者这个小提琴:http://jsfiddle.net/v5vJR/3/

我尝试为柱形图修改它,但它不起作用。

【问题讨论】:

    标签: javascript highcharts


    【解决方案1】:

    柱状图(倒置图)和柱状图的逻辑不同,例如柱状图:

                formatter: function () {
                    if (this.y == null) {
                        var chart = this.series.chart,
                            categoryWidth = chart.plotWidth / chart.xAxis[0].categories.length,
                            offset = (this.point.x) * categoryWidth + categoryWidth / 2,
                            text = chart.renderer.text('N/A', -999, -999).add();
    
                        text.attr({
                            x: chart.plotLeft + offset - text.getBBox().width / 2, //center label
                            y: chart.plotTop + chart.plotHeight - 8 // padding
                        });
    
                    } else {
                        return this.y;
                    }
                },
    

    现场演示:http://jsfiddle.net/90amxpc1/4/

    注意:
    您可能希望存储 text 变量以在隐藏系列或放大图表时删除该文本。

    【讨论】:

    • 谢谢。完美运行!! :)
    • 如果屏幕被调整大小,这段代码会复制文本。有什么补救措施吗?
    • 查看我的note - 使用标签存储变量,例如简单数组。然后在渲染新标签之前,删除旧标签。或者用新的位置更新旧的。
    • 现在最新版high-charts好像坏了:5.0.7
    • 查看我的评论here
    猜你喜欢
    • 2017-07-08
    • 1970-01-01
    • 2023-03-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-11-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多