1. ホーム
  2. 質問と答え
  3. 凡例でAmchartsで列を非表示にできますか？

凡例でAmchartsで列を非表示にできますか？

2017-09-20 15 views
0

私は現在、私が持っているいくつかのデータを表示するためにグラフに取り組んでいます。グラフに特定の値を表示したり表示したりすることはできません。しかし、同じ方法をグラフの列に適用できるかどうかは疑問でした。コード以下はです。 （クラスタ化されたバーグラフの一例に基づいて）凡例でAmchartsで列を非表示にできますか？

<html> 
<body> 
<!-- Styles --> 
<style> 
#chartdiv { 
    width  : 100%; 
    height  : 500px; 
    font-size : 11px; 
}      
</style> 
<!-- Resources --> 
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> 
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
<!-- Chart code --> 
<script> 
var chart = AmCharts.makeChart("chartdiv", { 
    "type": "serial", 
    "theme": "light", 
    "categoryField": "year", 
    "rotate": false, 
    "legend": { 
     "useGraphSettings": true 
    }, 
    "startDuration": 1, 
    "categoryAxis": { 
     "gridPosition": "start", 
     "position": "left" 
    }, 
    "trendLines": [], 
    "graphs": [ 
     { 
      "balloonText": "Income:[[value]]", 
      "fillAlphas": 0.8, 
      "id": "AmGraph-1", 
      "lineAlpha": 0.2, 
      "title": "Income", 
      "type": "column", 
      "valueField": "income" 
     }, 
     { 
      "balloonText": "Expenses:[[value]]", 
      "fillAlphas": 0.8, 
      "id": "AmGraph-2", 
      "lineAlpha": 0.2, 
      "title": "Expenses", 
      "type": "column", 
      "valueField": "expenses" 
     } 
    ], 
    "guides": [], 
    "valueAxes": [ 
     { 
      "id": "ValueAxis-1", 
      "position": "top", 
      "axisAlpha": 0 
     } 
    ], 
    "allLabels": [], 
    "balloon": {}, 
    "titles": [], 
    "dataProvider": [ 
     { 
      "year": 2005, 
      "income": 23.5, 
      "expenses": 18.1 
     }, 
     { 
      "year": 2006, 
      "income": 26.2, 
      "expenses": 22.8 
     }, 
     { 
      "year": 2007, 
      "income": 30.1, 
      "expenses": 23.9 
     }, 
     { 
      "year": 2008, 
      "income": 29.5, 
      "expenses": 25.1 
     }, 
     { 
      "year": 2009, 
      "income": 24.6, 
      "expenses": 25 
     } 
    ], 
    "export": { 
     "enabled": true 
    } 

}); 
</script> 
<!-- HTML --> 
<div id="chartdiv"></div>        
</body> 
</html>

それは（デ）選択収入や支出することは可能ですが、また、（デ）の伝説を持つことができるであろう別の年を選択？例えば。他の年を見せている間に2006年を完全に隠しているか、2005年と2009年のみを示しています。

私は周りを見回して、私が持っている問題に似ているsomediscussionsが見つかりましたが、私が探しているものと正確に一致しません。

どのような考えですか？

出典

2017-09-20 KRAD

答えて

1

これは、amChartの凡例を使用して行うことはできません。代わりに、dataProviderを変更してグラフを更新する必要があります。

例、あなたのチャートから2007を非表示にしたい場合：

HTML

<button type="button" onclick="hideYear(2007)">hide 2007</button>

JS

var my_data = [ 
    { 
     "year": 2005, 
     "income": 23.5, 
     "expenses": 18.1 
    }, 
    { 
     "year": 2006, 
     "income": 26.2, 
     "expenses": 22.8 
    }, 
    { 
     "year": 2007, 
     "income": 30.1, 
     "expenses": 23.9 
    }, 
    { 
     // ... 
    } 
]; 

// create your chart initially using all data 
var chart = AmCharts.makeChart("chartdiv", { 
    "type": "serial", 
    "dataProvider": my_data, 
    // ... 
}); 

function hideYear(year){ 

    var new_dataprovider = []; 

    // loop over my_data 
    my_data.forEach(function(item){ 
    if(item.year != year){ 
     new_dataprovider.push(item); 
    } 
    }); 

    // now that we have our new dataprovider 
    // excluding a certain year, 
    // update our chart 
    chart.dataProvider = new_dataprovider; 

    // validateData will refresh the chart 
    chart.validateData(); 

}

チャートの設定に応じて、これは非表示になります2007年は完全に（カテゴリ軸から）。データ項目を省略する代わりに、 "収入"と "経費"フィールドをnullに設定して、年（カテゴリ）自体が表示されるようにすることができます。

希望は意味があります。

出典

2017-09-21 07:24:53 Robbert

+1

ありがとう、これは本当に私の道に私を助けました！動的な選択を含むようにコードを拡張しました。また、隠された年が再び表示されるようにしました。コード例は[here]（https://jsbin.com/vanoqupito/edit?html,output）にあります！ – KRAD

+0

おそらくあなたは[この問題]（https://stackoverflow.com/questions/46522892/amcharts-removing-columns-from-dataprovider-with-validatedata-not-working）を解決する方法を知っていますか？ – KRAD

0

列を非表示にする方法のコードを提供してくれた@Robbertに感謝します。私はそれをさらに進めて、今度は複数の列を一度に隠すことができ、選択メニューと2つのボタンで再び表示することができます。完全なコードは以下にありますか、または作業例hereにあります。

<html> 
<body> 
<style> 
#chartdiv { 
    width  : 100%; 
    height  : 500px; 
    font-size : 11px; 
}      
</style> 
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> 
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
<script> 
var my_data = [ 
    { 
     "year": 2005, 
     "income": 23.5, 
     "expenses": 18.1 
    }, 
    { 
     "year": 2006, 
     "income": 26.2, 
     "expenses": 22.8 
    }, 
    { 
     "year": 2007, 
     "income": 30.1, 
     "expenses": 23.9 
    }, 
    { 
     "year": 2008, 
     "income": 26.1, 
     "expenses": 24.4 
    }, 
    { 
     "year": 2009, 
     "income": 24.1, 
     "expenses": 23.7 
    } 
]; 

var chart = AmCharts.makeChart("chartdiv", { 
    "type": "serial", 
    "theme": "light", 
    "categoryField": "year", 
    "rotate": false, 
    "legend": { 
     "useGraphSettings": true 
    }, 
    "startDuration": 1, 
    "categoryAxis": { 
     "gridPosition": "start", 
     "position": "left" 
    }, 
    "trendLines": [], 
    "graphs": [ 
     { 
      "balloonText": "Income:[[value]]", 
      "fillAlphas": 0.8, 
      "id": "AmGraph-1", 
      "lineAlpha": 0.2, 
      "title": "Income", 
      "type": "column", 
      "valueField": "income" 
     }, 
     { 
      "balloonText": "Expenses:[[value]]", 
      "fillAlphas": 0.8, 
      "id": "AmGraph-2", 
      "lineAlpha": 0.2, 
      "title": "Expenses", 
      "type": "column", 
      "valueField": "expenses" 
     } 
    ], 
    "guides": [], 
    "valueAxes": [ 
     { 
      "id": "ValueAxis-1", 
      "position": "top", 
      "axisAlpha": 0 
     } 
    ], 
    "allLabels": [], 
    "balloon": {}, 
    "titles": [], 
    "dataProvider": my_data, 
    "export": { 
     "enabled": true 
    } 
}); 
var hiddenYears = []; 
function hideYear(){ 
    var selection = document.getElementById("yearSelection"); 
    var selectedYear = Number(selection.options[selection.selectedIndex].value); 
    hiddenYears.push(selectedYear); 

    var new_dataprovider = []; 

    // loop over my_data 
    my_data.forEach(function(item){ 
     if(!hiddenYears.includes(item.year)){ 
      new_dataprovider.push(item); 
     } 
    }); 

    // now that we have our new dataprovider 
    // excluding a certain year, 
    // update our chart 
    chart.dataProvider = new_dataprovider; 

    // validateData will refresh the chart 
    chart.validateData(); 
} 
function showYear(){ 
    var selection = document.getElementById("yearSelection"); 
    var selectedYear = Number(selection.options[selection.selectedIndex].value); 
    var index = hiddenYears.indexOf(selectedYear); 
    if (index > -1) { 
     hiddenYears.splice(index, 1); 
    } 
    var new_dataprovider = []; 
    my_data.forEach(function(item){ 
     if(!hiddenYears.includes(item.year)){ 
      new_dataprovider.push(item); 
     } 
    }); 
    // now that we have our new dataprovider 
    // excluding a certain year, 
    // update our chart 
    chart.dataProvider = new_dataprovider; 
    // validateData will refresh the chart 
    chart.validateData(); 
} 
</script> 
<div id="chartdiv"></div>  
<select id="yearSelection"> 
    <option>Select a year</option> 
</select> 
<script> 
var select = document.getElementById("yearSelection"); 
var options = [2005, 2006, 2007, 2008, 2009]; 
for(var i = 0; i < options.length; i++) { 
    var opt = options[i]; 
    var el = document.createElement("option"); 
    el.textContent = opt; 
    el.value = opt; 
    select.appendChild(el); 
} 
</script> 
<button type="button" onclick="hideYear(document.getElementById('yearSelection'))">Hide</button> 
<button type="button" onclick="showYear(document.getElementById('yearSelection'))">Show</button> 
</body> 
</html>

出典

2017-09-21 18:25:59 KRAD

 関連する問題

  • 関連する問題はありません^_^