时间戳

首页 > 解决方案 > Highcharts 添加没有数据的标签/列

highcharts - Highcharts 添加没有数据的标签/列

问题描述

我在使用没有附加数据的 Highcharts 绘图点时遇到问题。该图表是具有向下钻取功能的柱形图，在顶层显示每周平均“时间”，向下钻取显示所选周内每个案例的实际值。

我的问题是：当我深入到某一周时，如果它们存在于两个现有案例 ID 之间，则不存在的案例仍会显示在图表上。

考虑第 6 周传递的数据：[[272, 25.07][297, 500.54]]，只存在两种情况：272 和 297。但是，Highcharts 给了我这个：

https://i.stack.imgur.com/MpABB.png

这是图表本身的代码：

                Highcharts.chart('DrilldownChart', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    type: "",
                    labels: {
                        rotation: 90
                    },
                },
                yAxis: {
                    title: {
                        text: ''
                    }

                },
                exporting: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    column: {
                        minPointLength: 0
                    },
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: false,
                            format: '{point.y:.1f}',
                            rotation: 270
                        }
                    }
                },
                tooltip: {
                    pointFormat: '<span style="color:{#000}"></span>{point.y:.2f}<br/>'
                },

                series: MainDataArray,
                drilldown: {
                    series: DrilldownDataArray,
                }

            });

有谁知道如何阻止它在具有实际数据的点之间绘制标签/列？

谢谢！

标签： highcharts

解决方案

您只需要将x数组中的值转换为String类型，然后它们将被视为类别名称而不是类别索引。为了转换它，您可以Array.map()像这样使用函数：

var drilldownSeries = [{
    id: 'One',
    data: [[272, 25.07], [297, 500.54]].map(elem => {
        return [elem[0].toString(), elem[1]]
    })
  }]

但是，在此之前请确保您xAxis.type的设置为'category'，因为我注意到在您的代码中有一个空字符串分配给type字段。

这是显示如何实现描述效果的示例： https ://jsfiddle.net/8h03urrr/

推荐阅读