在highchart-ng模块中使用未排序的系列排序多列图表

时间:2016-12-18 05:18:48

标签: json sorting highcharts

我希望对http://jsfiddle.net/z2agkzt0/2/这样的列表进行排序 像这样的未分类系列。 这个系列有三个关于'斯德哥尔摩','哥德堡','马尔默'的数据行 由数据中的y值呈现的高亮图但数据不是 排序,但我想要一个排序图表,如顶部的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
        }
    }] 

1 个答案:

答案 0 :(得分:0)

更改系列的顺序。

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/