Highcharts gestapelt Prozentbereich

Question

Ich habe verschiedene Datenreihen mit tatsächlichen und erwarteten Wert. Für jedes Land wird erwartet, dass je nach Teamgröße mindestens xx Aufgaben erledigt werden. Der erwartete Wert kann sich erhöhen oder verringern. Neue Daten werden jeden Tag abgerufen und in einer SQLite-Datenbank gespeichert. Die Idee ist, Daten mit FLASK in Python darzustellen.

Die SQLite-Datenbank hat folgenden Aufbau: Data layout

ich Plotten diese Daten in einer solchen Art und Weise bin träumen, dass es in prozentual dargestellt ist. Nehmen wir an, wenn ich das Grundstück nur für Griechenland sehen würde, würde es dann den maximal erwarteten Wert betrachten, in diesem Fall 12, und würde nur 58% der Fläche darstellen, da der maximale gedeckte Wert 7 ist. Wenn ich es auch wäre Wenn man die Handlung für Polen sieht, wäre der Erwartungswert dann 22, was bedeutet, dass beide Länder ihre Aufgaben erfüllen müssen, um 100% zu erreichen.

Ich habe es versucht, aber ich bin irgendwie verloren. Hier ist mein Code:

Highcharts.chart('container', { 
chart: { 
    type: 'area' 
}, 
title: { 
    text: 'Covered assignents by country' 
}, 
xAxis: { 
    type: 'datetime', 
    tickmarkPlacement: 'on', 
    title: { 
     enabled: false 
    } 
}, 
yAxis: { 
    title: { 
     text: 'Percent' 
    } 
}, 
tooltip: { 
    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} assignments)<br/>', 
    split: true 
}, 
plotOptions: { 
    area: { 
     stacking: 'percent', 
     lineColor: '#ffffff', 
     lineWidth: 1, 
     marker: { 
      lineWidth: 1, 
      lineColor: '#ffffff' 
     } 
    } 
}, 
series: [{ 
    name: 'Greece', 
    data: [{x: Date.UTC(2017,09,08), y:4}, {x: Date.UTC(2017,09,09), y:6}, {x: Date.UTC(2017,09,10), y:7}] 
}, { 
    name: 'Poland', 
    data: [{x: Date.UTC(2017,09,08), y:1}, {x: Date.UTC(2017,09,09), y:3}, {x: Date.UTC(2017,09,10), y:5}] 
}, { 
    name: 'Italy', 
    data: [{x: Date.UTC(2017,09,08), y:1}, {x: Date.UTC(2017,09,09), y:2}, {x: Date.UTC(2017,09,10), y:7}] 
}] 
}); 

jsfiddle: http://jsfiddle.net/ehnhq0pz/3/

Ich hoffe, dass es Sinn macht :)

Answer 1

ändern stacking von "Prozent" zu "normalen" ("Prozent" füllt das Diagramm immer nach oben). Dann müssen Sie die y Werte als Prozentwerte berechnen, bevor Sie die Datenreihe machen:

data: [{x: Date.UTC(2017,09,08), origTasks:4, y:14}, ... 

Oben, ist der Prozentsatz, den Sie sich irgendwie berechnen. Beachten Sie, dass Sie auch andere Daten in die Serie aufnehmen können und später z. B. in Tooltips darauf zugreifen können (hier: origTasks).

http://jsfiddle.net/ehnhq0pz/5/