折れ線グラフボタンを非表示にしても色を維持する

Question

テーブルからデータを取得し、折れ線グラフを作成します。 ボタンを使って行を切り替えます。

<div id="checkboxes" style="min-height: 100px;"> 
<input type="checkbox" class="checkbox" style="display: none;" id="kolom1" checked="checked" /><label class="medexams" for="kolom1"><span class="check_icon"></span>TSH</label> 
<input type="checkbox" class="checkbox" style="display: none;" id="kolom2" checked="checked" /><label class="medexams" for="kolom2"><span class="check_icon"></span>FT3</label> 
<input type="checkbox" class="checkbox" style="display: none;" id="kolom3" checked="checked" /><label class="medexams" for="kolom3"><span class="check_icon"></span> FT4</label> 
</div> 
<div name="curve_chart" id="curve_chart" style="width: 100%; height: 300px; "></div> 

<?php 
$db =& JFactory::getDBO(); 
$query = "SELECT * FROM `table` WHERE `id` = '$id' ORDER BY `vdate` ASC"; 
$db->setQuery($query); 
$results = $db->query(); 
while($row = mysqli_fetch_array($results)){ 
    $chartentry .= "['".date("d/m/Y", strtotime($row['vdate']))."', ".$row{'check_tsh'}.", ".$row{'check_ft3'}.", ".$row{'check_ft4'}."],"; 
} 
?> 
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> 
<script type="text/javascript"> 
google.setOnLoadCallback(drawChart); 

function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
    ['vdate', 'THS', 'FT3', 'FT4'], 
    <?php echo $chartentry ?> 
]); 

var options = { 
    legendTextStyle: {color: '#757575'}, 
    fontName: 'Didact Gothic', 
    curveType: 'function', 
    height: 300, 
    pointSize: 5, 
    series: {0: { color: '#000000' },1: { color: '#D20000' },2: { color: '#5CB85C' },}, 
    hAxis: {title: 'Visit', titleTextStyle: {fontName: 'Didact Gothic', color: '#757575'}, textStyle:{color: '#757575'}}, 
    vAxis: {title: 'Prices', titleTextStyle: {fontName: 'Didact Gothic', color: '#757575'}, textStyle:{color: '#757575'}, viewWindow: {min:0}} 
}; 

var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
    data.addColumn({type: 'string', role: 'annotation'}); 
var view = new google.visualization.DataView(data); 
    view.setColumns([0, 1,{ calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"}, 
         2,{ calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"}, 
         3,{ calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"}]); 
var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
    chart.draw(view, options); 
    $(document).ready(function() { 
    // do stuff on "ready" event 
    $(".checkbox").change(function() { 
    view = new google.visualization.DataView(data); 
var tes =[0]; 

    if($("#kolom1").is(':checked')) {tes.push(1,{calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"});} 
    if($("#kolom2").is(':checked')) {tes.push(2,{calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"});} 
    if($("#kolom3").is(':checked')) {tes.push(3,{calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"});} 
    view.setColumns(tes);  
    chart.draw(view, options); 
    }); 
}); 
</script> 

すべての作品が、チャートをhidding後に更新または線の色を変更する行を示す、あなたがラインの多くを持っている場合、これは本当に混乱することができているとき。 1つ以上の色が隠されていても変更されない行には色を設定しますか？

Answer 1

の代わりに、線の色を定義するためのseriesオプションを使用して、
行が変更されたとき、あなたは、また元の配列

から該当する色を追加、単純な配列その後、

でcolorsオプションを使用します文書の準備ができると知っているGoogleのコールバックに頼ることができ

...作業スニペット以下を参照してください

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['vdate', 'THS', 'FT3', 'FT4'], 
 
     [new Date('08/01/2016'), 10, 20, 30], 
 
     [new Date('08/02/2016'), 20, 40, 60] 
 
    ]); 
 

 
    var chartColors = ['#000000', '#D20000', '#5CB85C']; 
 

 
    var options = { 
 
     legendTextStyle: {color: '#757575'}, 
 
     fontName: 'Didact Gothic', 
 
     curveType: 'function', 
 
     height: 300, 
 
     pointSize: 5, 
 
     colors: chartColors, 
 
     hAxis: {title: 'Visit', titleTextStyle: {fontName: 'Didact Gothic', color: '#757575'}, textStyle:{color: '#757575'}}, 
 
     vAxis: {title: 'Prices', titleTextStyle: {fontName: 'Didact Gothic', color: '#757575'}, textStyle:{color: '#757575'}, viewWindow: {min:0}} 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
 
    data.addColumn({type: 'string', role: 'annotation'}); 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1,{ calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"}, 
 
         2,{ calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"}, 
 
         3,{ calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"}]); 
 
    var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
 
    chart.draw(view, options); 
 

 
    $(".checkbox").change(function() { 
 
     view = new google.visualization.DataView(data); 
 
     var tes =[0]; 
 
     var selectedColors = []; 
 

 
     if($("#kolom1").is(':checked')) { 
 
     tes.push(1,{calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"}); 
 
     selectedColors.push(chartColors[0]); 
 
     } 
 
     if($("#kolom2").is(':checked')) { 
 
     tes.push(2,{calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"}); 
 
     selectedColors.push(chartColors[1]); 
 
     } 
 
     if($("#kolom3").is(':checked')) { 
 
     tes.push(3,{calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"}); 
 
     selectedColors.push(chartColors[2]); 
 
     } 
 
     view.setColumns(tes); 
 
     options.colors = selectedColors; 
 
     chart.draw(view, options); 
 
    }); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="checkboxes" style="min-height: 100px;"> 
 
    <input type="checkbox" class="checkbox" style="display: none;" id="kolom1" checked="checked" /><label class="medexams" for="kolom1"><span class="check_icon"></span>TSH</label> 
 
    <input type="checkbox" class="checkbox" style="display: none;" id="kolom2" checked="checked" /><label class="medexams" for="kolom2"><span class="check_icon"></span>FT3</label> 
 
    <input type="checkbox" class="checkbox" style="display: none;" id="kolom3" checked="checked" /><label class="medexams" for="kolom3"><span class="check_icon"></span> FT4</label> 
 
</div> 
 
<div name="curve_chart" id="curve_chart" style="width: 100%; height: 300px; "></div>