チェックボックスを使用してハイチャート内のフィルタカテゴリ

Question

チェックボックスを使用してカテゴリをフィルタリングしたいと思います。たとえば、ユーザーがサーバーをチェックする場合、クラスServerに属するカテゴリのみが表示され、ハイチャートが再描画されます。このよう

：

、ユーザーがすべてのチェックボックスをチェックした場合、すべてのカテゴリが表示されるはずです。ここで

はフィドルは次のとおりです。事前にhttp://jsfiddle.net/Lqcrgrbh/

ありがとう！

$(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方法を編集することができるはずですが、あなたはあなたのx軸上の両極端を変更します。この場合、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/