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

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

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

促甲状腺激素
FT3
FT4
不使用
系列
选项定义线条颜色，

将
颜色
选项与简单数组一起使用

然后，当线条发生变化时，从原始阵列添加适用的颜色

此外，您还可以依靠google回调来知道文档何时准备就绪

请参阅以下工作片段


google.charts.load（'current'{
回调：函数（）{
var data=google.visualization.arrayToDataTable([
['vdate'、'THS'、'FT3'、'FT4']，
[新日期（'08/01/2016'），10,20,30]，
[新日期（'08/02/2016'）、20、40、60]
]);
var chartColors=['#000000'、'#D20000'、'#5CB85C']；
变量选项={
legendTextStyle:{颜色：'#757575'}，
fontName:“Didact哥特式”，
curveType:'函数'，
身高：300，
点数：5，
颜色：黄绿色，
hAxis:{title:'Visit'，titleTextStyle:{fontName:'Didact Gothic'，color:'757575'}，textStyle:{color:'75757575'}，
vAxis:{title:'Prices'，titleTextStyle:{fontName:'Didact Gothic'，颜色：'#757575'}，文本样式：{color:'#75757575'}，视图窗口：{min:0}
};
var chart=new google.visualization.LineChart（document.getElementById（'curve_chart'）；
addColumn（{type:'string'，role:'annotation'}）；
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1，{calc:“stringify”，sourceColumn:1，类型：“string”，角色：“annotation”}，
2，{calc:“stringify”，sourceColumn:2，类型：“string”，角色：“annotation”}，
3，{calc:“stringify”，sourceColumn:3，类型：“string”，角色：“annotation”}）；
var chart=new google.visualization.LineChart（document.getElementById（'curve_chart'）；
图表绘制（视图、选项）；
$（“.checkbox”）.change（函数（）{
视图=新的google.visualization.DataView（数据）；
var-tes=[0]；
var selectedColors=[]；
如果（$（“#kolom1”）。是（':checked'））{
push（1，{calc:“stringify”，sourceColumn:1，type:“string”，role:“annotation”}）；
selectedColors.push（chartColors[0]）；
}
如果（$（“#kolom2”）。是（'：选中的'））{
push（2，{calc:“stringify”，sourceColumn:2，type:“string”，role:“annotation”}）；
selectedColors.push（chartColors[1]）；
}
如果（$（“#kolom3”）。是（':checked'））{
push（3，{calc:“stringify”，sourceColumn:3，type:“string”，role:“annotation”}）；
selectedColors.push（chartColors[2]）；
}
视图.设置列（tes）；
options.colors=所选颜色；
图表绘制（视图、选项）；
});
},
软件包：['corechart']
});

促甲状腺激素
FT3
FT4
不使用
系列
选项定义线条颜色，

将
颜色
选项与简单数组一起使用

然后，当线条发生变化时，从原始阵列添加适用的颜色

此外，您还可以依靠google回调来知道文档何时准备就绪

请参阅以下工作片段


google.charts.load（'current'{
回调：函数（）{
var data=google.visualization.arrayToDataTable([
['vdate'、'THS'、'FT3'、'FT4']，
[新日期（'08/01/2016'），10,20,30]，
[新日期（'08/02/2016'）、20、40、60]
]);
var chartColors=['#000000'、'#D20000'、'#5CB85C']；
变量选项={
legendTextStyle:{颜色：'#757575'}，
fontName:“Didact哥特式”，
curveType:'函数'，
身高：300，
点数：5，
颜色：黄绿色，
hAxis:{title:'Visit'，titleTextStyle:{fontName:'Didact Gothic'，color:'757575'}，textStyle:{color:'75757575'}，
vAxis:{title:'Prices'，titleTextStyle:{fontName:'Didact Gothic'，颜色：'#757575'}，文本样式：{color:'#75757575'}，视图窗口：{min:0}
};
var chart=new google.visualization.LineChart（document.getElementById（'curve_chart'）；
addColumn（{type:'string'，role:'annotation'}）；
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1，{calc:“stringify”，sourceColumn:1，类型：“string”，角色：“annotation”}，
2，{calc:“stringify”，sourceColumn:2，类型：“string”，角色：“annotation”}，
3，{calc:“stringify”，sourceColumn:3，类型：“string”，角色：“annotation”}）；
var chart=new google.visualization.LineChart（document.getElementById（'curve_chart'）；
图表绘制（视图、选项）；
$（“.checkbox”）.change（函数（）{
视图=新的google.visualization.DataView（数据）；
var-tes=[0]；
var selectedColors=[]；
如果（$（“#kolom1”）。是（':checked'））{
push（1，{calc:“stringify”，sourceColumn:1，type:“string”，role:“annotation”}）；
selectedColors.push（chartColors[0]）；
}
如果（$（“#kolom2”）。是（'：选中的'））{
push（2，{calc:“stringify”，sourceColumn:2，type:“string”，role:“annotation”}）；
selectedColors.push（chartColors[1]）；
}
如果（$（“#kolom3”）。是（':checked'））{
push（3，{calc:“stringify”，sourceColumn:3，type:“string”，role:“annotation”}）；
selectedColors.push（chartColors[2]）；
}
视图.设置列（tes）；
options.colors=所选颜色；
图表绘制（视图、选项）；
});
},
软件包：['corechart']
});

促甲状腺激素
FT3
FT4
侧注：看起来
绘图图的结尾大括号
缺失…侧注：看起来
绘图图的结尾大括号
缺失。。。