Highcharts: Grafik ändern, wenn Optionsfeld ausgewählt wurde

Question

Wie kann ich Standard-Optionsfeld ausgewählt und Diagramm sichtbar machen. Die Änderungsfunktion besteht darin, zwischen den Optionsfeldern zu wechseln und die Grafik zu ändern.

Hier ist mein Code:

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

In Übereinstimmung mit @Halvor Strand (aus den Kommentaren), I $('.test').first().prop("checked", true).trigger("change"); tun würde. Ich habe auch ein paar andere Probleme in deinem Code behoben und es ein wenig aufgeräumt.

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