Question

我试图找出一种隐藏柱形图上特定系列的方法，而不会在隐藏时留下空格。

Highcharts中有什么东西可以摆脱它吗？还有什么导致这个问题？

编辑：这是一个例子（尝试隐藏猫）：

＆＃13;

$(function () {
    $('#container').highcharts({

        chart: {
            marginBottom: 120,
            marginLeft: 80,
            width: 500
        },

        xAxis: {
            type: 'category',
            tickWidth: 0,
            lineColor: "#C0D0E0",
            lineWidth: 1,
            categories: ['dog', 'cat', 'bird']
        },
        legend: {
            width: 400,
            floating: true,
            align: 'left',
            x: 70, // = marginLeft - default spacingLeft
            itemWidth: 70,
            borderWidth: 0,
            enabled: true
        },
        plotOptions: {
            colorByPoint: true,
            column: {
                pointPadding: 0,
                borderWidth: 0,
                grouping: false
            
            }
        },
        series: [{
            type: "column",
            name: "dog",
            data: [{
                age: 52,
                x: 0,
                y: 52
            }]
        }, {
            type: "column",
            name: "cat",
            data: [{
                age: 12,
                x: 1,
                y: 12
            }]
        }, {
            type: "column",
            name: "bird",
            data: [{
                age: 14,
                x: 2,
                y: 14
            }]
        }]
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

＆＃13;

Answer 1

Highcharts中有什么东西可以摆脱它吗？

这是一个使用breaks功能（在chart.events.render中自动计算）以消除＆＃34;未使用的＆＃34;类：

        var series = this.series,
          xAxis = this.xAxis[0],
          categories = xAxis.categories.slice(),
          categoryFlags = new Array(categories.length).fill(false), // indicates if any point has a value for category with the given index
          breaks = [],
          correspondingPoint;


        // find out which categories are 'used'
        for (var i = 0; i < categories.length; i++) {

          for (var ii = 0; ii < series.length; ii++) {
            if (!series[ii].visible) {
              continue;
            }

            correspondingPoint = series[ii].data.find((point) => point.x === i);
            if (correspondingPoint) {
              categoryFlags[i] = true;
              break;
            }
          }
        }

        // create and apply breaks
        categoryFlags.forEach(function(flag, index) {
          if (!flag) {
            breaks.push({
              from: index - 0.5,
              to: index + 0.5
            });
          }
        });

        //console.log(breaks)
        xAxis.update({
          breaks: breaks
        });
      }

现场演示： http://jsfiddle.net/BlackLabel/fubwdm4x/

API参考： https://api.highcharts.com/highcharts/xAxis.breaks

还有什么导致这个问题？

这是Highcharts的默认行为。类别只是如何格式化x轴标签和位置刻度的信息。如果您停用它们，您将获得正常的＆＃39;线性轴。 Highcharts没有任何默认算法可以在数据之间找到未使用的空格并将其删除。

通过图例隐藏Highcharts系列，它们之间没有空白区域

1 个答案: