折线图隐藏显示按钮但保留颜色

时间：2016-08-02 10:18:35

标签： javascript google-visualization

我从表中获取数据并创建折线图。 我用按钮来切换线条。

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

一切正常但是当隐藏或显示一条线后更新图表时，线条颜色会发生变化，如果您有很多线条，这可能会让您感到困惑。 即使隐藏了其中一个或多个也不会改变线条的颜色吗？

1 个答案:

答案 0 :(得分：0)

而不是使用series选项来定义线条颜色，
将colors选项与简单数组一起使用

然后当线条改变时，添加原始数组中的适用颜色

另外，您可以依靠Google回调来了解文档何时准备就绪

请参阅以下工作代码段...

＆＃13;
＆＃13; 
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']
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题