sortierte Multi-Säulendiagramm mit unsortierten Serie in highchart-ng-Modul

Question

Ich möchte sortierte Säulendiagramm wie http://jsfiddle.net/z2agkzt0/2/ mit unsortierten Serien wie diese haben. diese Serie hat drei Daten Zeile über 'Stockholm', 'Göteborg', 'Malmö' , dass die Highchart gerendert durch den y-Wert in ihren Daten aber die Daten sind nicht sortiert, aber ich möchte eine sortierte Grafik wie die JSFiddle-Link in die Spitze.

series: [{ 
     type: 'column', 
     name: 'Stockholm', 
     data: [{x:0, y:95, color: Highcharts.getOptions().colors[0]}] 
    }, { 
     type: 'column', 
     name: 'Göteborg', 
     data: [{x:0, y:110, color: Highcharts.getOptions().colors[1]}] 
    }, { 
     type: 'column', 
     name: 'Malmö', 
     data: [{x:0, y:70, color: Highcharts.getOptions().colors[2]}] 
    }, { 
     type: 'column', 
     name: 'Göteborg', 
     data: [{x: 1, name: 'February', y: 98, color: 
Highcharts.getOptions().colors[1] // Göteborg's color 
     }], 
     showInLegend: false, 
     dataLabels: { 
      enabled: false 
     } 
    }, { 
     type: 'column', 
     name: 'Malmö', 
     data: [{x: 1, name: 'February', y: 85, color: 
    Highcharts.getOptions().colors[2] // Stockholm's color 
     }], 
     showInLegend: false, 
     dataLabels: { 
      enabled: false 
     } 
    }, { 
     type: 'column', 
     name: 'Stockholm', 
     data: [{x: 1, name: 'February', y: 100, color: 
    Highcharts.getOptions().colors[0] // Stockholm's color 
     }], 
     showInLegend: false, 
     dataLabels: { 
      enabled: false 
     } 
    }, { 
     type: 'column', 
     name: 'Göteborg', 
     data: [{x: 2, name: 'Mars', y: 120, color: 
Highcharts.getOptions().colors[1] // Göteborg's color 
     }], 
     showInLegend: false, 
     dataLabels: { 
      enabled: false 
     } 
    }, { 
     type: 'column', 
     name: 'Malmö', 
     data: [{x: 2, name: 'Mars', y: 92, color: 
Highcharts.getOptions().colors[2] // Stockholm's color 
     }], 
     showInLegend: false, 
     dataLabels: { 
      enabled: false 
     } 
    }, { 
     type: 'column', 
     name: 'Stockholm', 
     data: [{x: 2, name: 'Mars', y: 90, color: 
    Highcharts.getOptions().colors[0] // Stockholm's color 
     }], 
     showInLegend: false, 
     dataLabels: { 
      enabled: false 
     } 
    }] 

Answer 1

Ändern Sie die Reihenfolge der Serien.

series: [{ 
    type: 'column', 
    name: 'Stockholm', 
    data: [{ 
    x: 0, 
    y: 95, 
    color: Highcharts.getOptions().colors[0] 
    }] 
}, { 
    type: 'column', 
    name: 'Göteborg', 
    data: [{ 
    x: 0, 
    y: 110, 
    color: Highcharts.getOptions().colors[1] 
    }] 
}, { 
    type: 'column', 
    name: 'Malmö', 
    data: [{ 
    x: 0, 
    y: 70, 
    color: Highcharts.getOptions().colors[2] 
    }] 
}, { 
    type: 'column', 
    name: 'Stockholm', 
    data: [{ 
    x: 1, 
    name: 'February', 
    y: 100, 
    color: Highcharts.getOptions().colors[0] // Stockholm's color 
    }], 
    showInLegend: false, 
    dataLabels: { 
    enabled: false 
    } 
}, { 
    type: 'column', 
    name: 'Göteborg', 
    data: [{ 
    x: 1, 
    name: 'February', 
    y: 98, 
    color: Highcharts.getOptions().colors[1] // Göteborg's color 
    }], 
    showInLegend: false, 
    dataLabels: { 
    enabled: false 
    } 
}, { 
    type: 'column', 
    name: 'Malmö', 
    data: [{ 
    x: 1, 
    name: 'February', 
    y: 85, 
    color: Highcharts.getOptions().colors[2] // Stockholm's color 
    }], 
    showInLegend: false, 
    dataLabels: { 
    enabled: false 
    } 
}, { 
    type: 'column', 
    name: 'Stockholm', 
    data: [{ 
    x: 2, 
    name: 'Mars', 
    y: 90, 
    color: Highcharts.getOptions().colors[0] // Stockholm's color 
    }], 
    showInLegend: false, 
    dataLabels: { 
    enabled: false 
    } 
}, { 
    type: 'column', 
    name: 'Göteborg', 
    data: [{ 
    x: 2, 
    name: 'Mars', 
    y: 120, 
    color: Highcharts.getOptions().colors[1] // Göteborg's color 
    }], 
    showInLegend: false, 
    dataLabels: { 
    enabled: false 
    } 
}, { 
    type: 'column', 
    name: 'Malmö', 
    data: [{ 
    x: 2, 
    name: 'Mars', 
    y: 92, 
    color: Highcharts.getOptions().colors[2] // Stockholm's color 
    }], 
    showInLegend: false, 
    dataLabels: { 
    enabled: false 
    } 
}] 

Beispiel: http://jsfiddle.net/z2agkzt0/5/