Liniendiagramm Ausblenden-Zeigen mit Schaltflächen, aber Farben beibehalten

Question

Ich erhalte Daten aus einer Tabelle und erstelle ein Liniendiagramm. Ich benutze Knöpfe, um die Linien umzuschalten.

<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> 

Alle Arbeiten, aber wenn das Diagramm nach hidding oder zeigt eine Linie der Linienfarben und das ist wirklich verwirrend sein kann, wenn Sie eine Menge von Linien ändern aktualisiert wird. Gibt es Weg, um Farben zu den Linien zu setzen, die sich nicht ändern, selbst wenn 1 oder mehr davon versteckt sind?

Answer 1

stattdessen die die Verwendung series Option Linienfarben zu definieren,
verwenden, um die colors Option mit einem einfachen Array

dann, wenn die Linien zu ändern, fügt die entsprechenden Farben aus dem ursprünglichen Array

auch, Sie vertrauen auf die google-Rückruf kann zu wissen, wann das Dokument fertig ist

folgende Arbeits Schnipsel sehen ...

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>