ハイチャート：ラジオボタンを選択したときにグラフを変更します

Question

デフォルトのラジオボタンを選択してグラフを表示させる方法を教えてください。変更機能は、ラジオボタンを切り替えてグラフを変更することです。ここで

私のコードです：

HTML

<script src="http://code.highcharts.com/highcharts.js"></script> 


<input class="test" name="g" type="radio" value="a">data A</input> 

<input class="test" name="g" type="radio" value="b">data B</input> 


<input class="test" name="g" type="radio" value="total">Total</input> 

<div id="container" style="height: 500px; width: 1000px"></div> 
<script> 
    var cashData = [341876.90, 256433.87, 212671.92, 198188.54, 128761.23, -199120.67, 1272.54, 59320.65]; 
    var cashData2 = [-141876.90, 26433.87, 112671.92, 118188.54, 109761.23, 99120.67, 1272.54, 59320.65]; 

    var invoiceData = [249129.45, 158324.81, 168234.87, 96012.45, 12789.23, 86210.23, 167232.95, 172616.23]; 
    var invoiceData2 = [119129.45, 128324.81, 158234.87, 226012.45, 22789.23, 336210.23, 227232.95, 212616.23]; 

     var expenseData = [-234645.45, -241219.65, -271981.44, -401432.89, -525198.34, -992615.09, -518671.92, -436981.32]; 
    var expenseData2 = [-224645.45, -111219.65, -211981.44, -201432.89, -445198.34, -332615.09, -338671.92, -416981.32]; 

    var categoriesName = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 

</script> 

JS

$(function() { 
    var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'line', 
     title: '' 
    }, 
    title: { 
     text: '' 
    }, 
    credits: { 
     enabled: false 
    }, 
    yAxis: { 
     title: { 
     text: "" 
     } 
    }, 
    xAxis: { 
     categories: categoriesName 
    } 
    }); 

    $(".test").change(function() { 
    value = this.getAttribute("value"); 
    while (chart.series.length > 0) { 
     chart.series[0].remove(true); 
    } 
    if (value == 'a') { 
     chart.addSeries({ 
     name: 'Cash', 
     data: cashData, 
     showInLegend: true 
     }); 
     chart.addSeries({ 
     name: 'Invoice', 
     data: invoiceData, 
     showInLegend: true 
     }); 
     chart.addSeries({ 
     name: 'Expense', 
     data: expenseData, 
     showInLegend: true, 
     }); 
    } else if (value == 'b') { 
     chart.addSeries({ 
     name: 'Cash', 
     data: cashData2, 
     showInLegend: true 
     }); 
     chart.addSeries({ 
     name: 'Invoice', 
     data: invoiceData2, 
     showInLegend: true 
     }); 
     chart.addSeries({ 
     name: 'Expense', 
     data: expenseData2, 
     showInLegend: true 
     }); 
    } 
    }); 
}); 

Answer 1

（コメント）@Halvorストランドに同意、私は$('.test').first().prop("checked", true).trigger("change");を行うだろう。私はあなたのコードにいくつかの他の問題を修正し、ちょっと整理しました。

$(function() { 
 
    var cashData = [341876.90, 256433.87, 212671.92, 198188.54, 128761.23, -199120.67, 1272.54, 59320.65]; 
 
    var cashData2 = [-141876.90, 26433.87, 112671.92, 118188.54, 109761.23, 99120.67, 1272.54, 59320.65]; 
 

 
    var invoiceData = [249129.45, 158324.81, 168234.87, 96012.45, 12789.23, 86210.23, 167232.95, 172616.23]; 
 
    var invoiceData2 = [119129.45, 128324.81, 158234.87, 226012.45, 22789.23, 336210.23, 227232.95, 212616.23]; 
 

 
    var expenseData = [-234645.45, -241219.65, -271981.44, -401432.89, -525198.34, -992615.09, -518671.92, -436981.32]; 
 
    var expenseData2 = [-224645.45, -111219.65, -211981.44, -201432.89, -445198.34, -332615.09, -338671.92, -416981.32]; 
 

 
    var categoriesName = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 
 

 
    var chart = new Highcharts.Chart({ 
 
    chart: { 
 
     renderTo: 'container', 
 
     type: 'line', 
 
     title: '' 
 
    }, 
 
    title: { 
 
     text: '' 
 
    }, 
 
    credits: { 
 
     enabled: false 
 
    }, 
 
    yAxis: { 
 
     title: { 
 
     text: '' 
 
     } 
 
    }, 
 
    xAxis: { 
 
     categories: categoriesName 
 
    } 
 
    }); 
 

 
    $('.test').change(function() { 
 
    value = this.getAttribute('value'); 
 
    while (chart.series.length > 0) { 
 
     chart.series[0].remove(true); 
 
    } 
 
    if (value == 'a') { 
 
     chart.addSeries({ 
 
     name: 'Cash', 
 
     data: cashData, 
 
     showInLegend: true 
 
     }); 
 
     chart.addSeries({ 
 
     name: 'Invoice', 
 
     data: invoiceData, 
 
     showInLegend: true 
 
     }); 
 
     chart.addSeries({ 
 
     name: 'Expense', 
 
     data: expenseData, 
 
     showInLegend: true, 
 
     }); 
 
    } else if (value == 'b') { 
 
     chart.addSeries({ 
 
     name: 'Cash', 
 
     data: cashData2, 
 
     showInLegend: true 
 
     }); 
 
     chart.addSeries({ 
 
     name: 'Invoice', 
 
     data: invoiceData2, 
 
     showInLegend: true 
 
     }); 
 
     chart.addSeries({ 
 
     name: 'Expense', 
 
     data: expenseData2, 
 
     showInLegend: true 
 
     }); 
 
    } 
 
    }); 
 

 
    $('.test').first().prop('checked', true).trigger('change'); 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="//code.highcharts.com/highcharts.js"></script> 
 
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <label> 
 
    data A 
 
    <input class="test" name="g" type="radio" value="a"> 
 
    </label> 
 
    <label> 
 
    data B 
 
    <input class="test" name="g" type="radio" value="b"> 
 
    </label> 
 
    <label> 
 
    Total 
 
    <input class="test" name="g" type="radio" value="total"> 
 
    </label> 
 
    <div id="container" style="height: 500px; width: 1000px"></div> 
 
</body> 
 

 
</html>