2017-07-05 5 views
-1

y軸の値が0のときにx軸の値を非表示にしようとしていますが、他のフィールドでフィルタを作成すると自動的に表示されます。y軸のデータがnullまたは0のとき、どのように自動x軸を非表示にしますか?

Codehttp://jsfiddle.net/o339uqLm/2/

+1

はStackOverflowのへようこそ!あなたの質問を少し拡大してください:小さな写真と必要なコードを追加してください。これは、他の読者があなたの質問を理解するのに役立ちます。 – ventiseis

+0

カテゴリを使用すると、これは組み込み機能ではありません。データを前処理する必要があります。 –

答えて

0

Barabaraレアードが述べたようにあなたのデータを前処理することができます。

Array.prototype.clean = function(deleteValue) { 
    for (var i = 0; i < this.length; i++) { 
    if (this[i] == deleteValue) {   
     this.splice(i, 1) 
     i-- 
    } 
    } 
    return this 
} 


const series = [{ 
    name: 'John', 
    data: [4, 3, null, 7, 2] 
}, { 
    name: 'Jane', 
    data: [5, 2, null, 2, 1] 
}, { 
    name: 'Joe', 
    data: [1, 4, null, 2, 5] 
}] 

for (let i = 0; i < series.length; ++i) { 
    // Remove nulls for data in all series 
    series[i].data.clean() 
} 

const options = { 
    chart: { 
    type: 'column' 
    }, 
    title: { 
    text: 'Stacked column chart' 
    }, 
    xAxis: { 
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
    }, 
    yAxis: { 
    min: 0, 
    title: { 
     text: 'Total fruit consumption' 
    }, 
    stackLabels: { 
     enabled: true, 
     style: { 
     fontWeight: 'bold', 
     color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
     } 
    } 
    }, 
    legend: { 
    align: 'right', 
    x: -30, 
    verticalAlign: 'top', 
    y: 25, 
    floating: true, 
    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
    borderColor: '#CCC', 
    borderWidth: 1, 
    shadow: false 
    }, 
    tooltip: { 
    headerFormat: '<b>{point.x}</b><br/>', 
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}' 
    }, 
    plotOptions: { 
    column: { 
     stacking: 'normal', 
     dataLabels: { 
     enabled: true, 
     color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
     } 
    } 
    }, 
    series: series 
} 

const chart = Highcharts.chart('container', options) 

ライブ例: http://jsfiddle.net/m62dxf9h/

関連する問題