Question

这是一个特定的情况，我需要比较ITEMS并在图表中显示结果。用户输入两个或三个或四个文章ID并获取图表中的数据。问题是当用户只输入两个或三个文章ID时，然后在图表图例中，我仍然得到没有数据的行的名称。

$scope.chartConfig1 = getChartConfigWithYaxisPlotLines('Production');
            $scope.chartConfig1.series.push({
                id: 1,
                name: "Item " + firstId,
                data: $scope.data[0],
                tooltip: {
                    valueDecimals: 2
                }
            }, {
                id: 2,
                name: "Item  " + firstId,
                color: "#1ea775",
                data: $scope.data[1],
                tooltip: {
                    valueDecimals: 2
                }
            }, {
                id: 3,
                name: "Item  " + firstId,
                data: $scope.data[2],
                tooltip: {
                    valueDecimals: 2
                }
            }, {
                id: 4,
                name: "Item " + firstId,
                data: $scope.data[3],
                tooltip: {
                    valueDecimals: 2
                }
            },{
                id: 5,
                name: "Item " + secondId,
                data: $scope.data[4],
                tooltip: {
                    valueDecimals: 2
                }
            }, {
                id: 6,
                name: "Item " + secondId,
                data: $scope.data[5],
                tooltip: {
                    valueDecimals: 2
                }
            }, {
                id: 7,
                name: "Item " + secondId,
                data: $scope.data[6],
                tooltip: {
                    valueDecimals: 2
                }
            }, {
                id: 8,
                name: "Item " + secondId,
                data: $scope.data[7],
                tooltip: {
                    valueDecimals: 2
                }
            },{
                id: 9,
                name: "Item " + thirdId,
                data: $scope.data[8],
                tooltip: {
                    valueDecimals: 2
                }
            }, {
                id: 10,
                name: "Item " + thirdId,
                data: $scope.data[9],
                tooltip: {
                    valueDecimals: 2
                }
            }, {
                id: 11,
                name: "Item " + thirdId,
                data: $scope.data[10],
                tooltip: {
                    valueDecimals: 2
                }
            }, {
                id: 12,
                name: "Item " + thirdId,
                data: $scope.data[11],
                tooltip: {
                    valueDecimals: 2
                }
            }
            );

在图例中，我显示项目和文章ID（在提交用于比较的输入ID时在功能中传递），如果我们只比较两篇文章，在图例中我们得到项目1，项目2，项目未定义，项目未定义。如果输入所有四个输入一切都很好

如果数据为null或未定义，高图中是否有任何方法可以隐藏图例中的名称？日Thnx

Answer 1

您可以使用load事件检查循环中的序列并隐藏没有任何数据的序列：

var chart = Highcharts.chart('container', {

  chart: {
    events: {
      load: function() {
        this.series.forEach(function(s) {
          s.update({
            showInLegend: s.points.length
          });
        });
      }
    }
  },

  series: [{
    data: [1, 2]
  }, {
    data: [3, 4, 2]
  }, {
    data: [] // no data
  }]
});

现场演示： http://jsfiddle.net/kkulig/355u0kaw/

API参考：

高图 - 如果没有数据，则隐藏图例中的名称

1 个答案: