Question

我想使用复选框过滤类别。例如，如果用户检查服务器 - 只有属于类Server的类别应该是可见的并重绘高级图。

像这样：

After

如果用户选中所有复选框，则所有类别都应该可见。

提前致谢！

$(function() {
var chart = new Highcharts.Chart('container', {
chart: {
  type: 'columnrange',
  inverted: true,
  height: 100
},

title: {
  text: null
},

xAxis: {
  categories: [{"name":"Email","sys_class":"Business Service"},{"name":"Server","sys_class":"Server"}],

  labels: {
    formatter: function () {
      return this.value.name;

    },
    useHTML: true
  }
},
yAxis: {
  type: 'datetime',
  tickInterval: 1000 * 60 * 60 * 24 * 30 * 6,
  title: {
    text: null
  },
  labels: {
    formatter: function () {
      return Highcharts.dateFormat('%b %Y', this.value);
    }
  }
},

plotOptions: {
  series: {
    grouping: false,
    stacking: 'normal',
    pointPadding: 0,
    groupPadding: 0.0,
    allowPointSelect: true,
    dataLabels: {
      enabled: true,
      align: 'center',
      x: -10,
      formatter: function() {
        return this.series.name;
      }
    }
  }
},

tooltip: {
  formatter: function() {
    var categories = this.x.name,
    series_name = this.series.name,
    low = this.point.low,
    high = this.point.high,
    duration = high - low;
    return '<b>' +series_name + '</b><br/><b>'+ categories + ': </b>'+ Highcharts.dateFormat('%d %b %Y',
    new Date(low)) + " - " + Highcharts.dateFormat('%d %b %Y',
    new Date(high)) + '<br/><b>Duration: </b>' + parseInt(duration / (1000 * 60 * 60 * 24 * 365)) + " years, " + new Date(duration).getUTCMonth() + " months, " + new Date(duration).getUTCDate() + " days";
  }
},

legend: {
  enabled: false
},

series: [{"color":"#f47700","data":[[],[1475539200000,1570147200000]],"name":"Concept"},{"color":"#f43701","data":[[1475625600000,1570233600000],[]],"name":"Planing"}]

});
});

Answer 1

你应该能够编辑你的togglePointsByClass方法，这样你就不会隐藏你的系列，但你会改变你的xAxis上的极端。在这种情况下，您可以使用Axis.update（）方法。

  function togglePointsByClass(className, shouldShow, chart) {
    var isChartDirty = false;
    if (shouldShow) {
      chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
        if (category.class === className) {
          visibleArr.push(i);
        }
      });
    } else {
      chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
        if (category.class === className && visibleArr.indexOf(i) > -1) {
          visibleArr.splice(visibleArr.indexOf(i), 1);
        }
      });
    }
    if (visibleArr.length) {
      chart.xAxis[0].update({
        min: Math.min.apply(null, visibleArr),
        max: Math.max.apply(null, visibleArr)
      })
    }
  }

在这里，您可以看到简单的示例：http://jsfiddle.net/Lqcrgrbh/1/

使用复选框过滤高级图表中的类别

1 个答案: