在 highchart-ng 模块中具有未排序系列的排序多柱形图

Question

我想要像http://jsfiddle.net/z2agkzt0/2/ 这样的排序柱形图 像这样未分类的系列。 这个系列有三个关于“斯德哥尔摩”、“哥德堡”、“马尔默”的数据行 由他们的数据中的 y 值呈现的 highchart 但数据不是 已排序，但我想要一个排序图表，如顶部的 jsfiddle 链接。

  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

改变系列的顺序。

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
  }
}]

示例：http://jsfiddle.net/z2agkzt0/5/