Frage in Javascript mit Highcharts

[abcdef]

Hallo liebe Community,
hier der Code:

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto">
      
            <Scripts>
                <asp:ScriptReference Path="~/Scripts/jquery-3.1.1.min.js" />
                <asp:ScriptReference Path="~/Scripts/highcharts/4.2.0/highcharts.js" />
            </Scripts>
<script type="text/javascript">
            $(function () {
                $('#container').highcharts({
                    chart: {
                        type: 'bar'
                    },
                    title: {
                        text: 'Stacked bar chart'
                    },
                    xAxis: {
                        categories: ['1', '2', '3', '4', '5']
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Points'
                        }
                    },
                    legend: {
                        reversed: true
                    },
                    plotOptions: {
                        series: {
                            stacking: 'normal'
                        }
                    },
                    series: [{
                        name: 'Team 1',
                        data: [3, 4, 1, 5, 3]
                    }
                   
                    , {
                        name: 'Team 1',
                        data: [2, 3, 5, 4, 4]
                    }]
                });
            });

        </script>

Mir werden die Werte zu den Teams in Balken angezeigt. Ich möchte gerne die Gesamtpunkt anzeigen lassen, am besten sogar in einem zusätzlichen Balken.

Wie kann ich jetzt die Daten in der Serie also die Arraydaten des jeweiligen "data" summieren und so ausgeben lassen, damit sie einen neuen Balken ergeben?

Danke und Gruß.

 

[kkapsner]

Du musst vor dem Aufruf von highcharts() dir den entsprechenden Wert berechnen und dem data-Array anhängen:

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto">
      
            <Scripts>
                <asp:ScriptReference Path="~/Scripts/jquery-3.1.1.min.js" />
                <asp:ScriptReference Path="~/Scripts/highcharts/4.2.0/highcharts.js" />
            </Scripts>
<script type="text/javascript">
            $(function () {
				var series = [{
					name: 'Team 1',
					data: [3, 4, 1, 5, 3]
				},
				{
					name: 'Team 1',
					data: [2, 3, 5, 4, 4]
				}];
				series.forEach(function(serie){
					serie.data.push(serie.data.reduce(function(sum, entry){return sum + entry}, 0));
				});
                $('#container').highcharts({
                    chart: {
                        type: 'bar'
                    },
                    title: {
                        text: 'Stacked bar chart'
                    },
                    xAxis: {
                        categories: ['1', '2', '3', '4', '5']
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Points'
                        }
                    },
                    legend: {
                        reversed: true
                    },
                    plotOptions: {
                        series: {
                            stacking: 'normal'
                        }
                    },
                    series: series
                });
            });

        </script>

 

[abcdef]

Vielen Dank für die Antwort !


Arbeite frisch mit .Net und .aspx Dateien, gibt es eine einfache Möglichkeit diese in .json umzuwandeln?

Gruß und Danke.