2015-06-30 147 views
0

目前有一种方法可以颠倒折线图xaxis标签的顺序,使标签以升序方式排列,并且最右边的刻度是'开始'吗?我当前的代码如下所示:Highcharts折线图XAxis标签订单

legend: { enabled: false}, 
    xAxis: { 
    title: { text: null}, 
    categories: chartCategories, 
    tickmarkPlacement: 'on', 
    labels: { 
     useHTML: false, 
     step: 2, 
     rotation: -40 
    }, 
    y: 30 
} 

这里是我的榜样

http://jsfiddle.net/skqshs9e/1/

我已经整理我的数据数组是在正确的顺序,它仍然显示在升序标签,但它不会将最右边的刻度线作为起点。如果您将鼠标悬停在最后一幅图上,则会在工具提示中看到“2015-12-19 - 2015-12-31”标签。

我想这是起点,并显示在xaxis和第2步,并没有第一个'2015-01-01 - 2015-02-01'显示在x轴上。任何帮助,将不胜感激!

回答

0

如果我正确理解您的要求。尝试在X轴做这个对象

xAxis: { 
    reversed:true, 
    title: { text: null}, 
    categories: chartCategories, 
    tickmarkPlacement: 'on', 
    labels: { 
     useHTML: false, 
     step: 2, 
     rotation: -40 
    }, 
    y: 30 
} 

结帐here

0

您可以随时扭转你的数据:http://jsfiddle.net/skqshs9e/4/

var chartCategories = [ 
    '2015-01-01 - 2015-02-01', 
    '2015-02-02 - 2015-03-04', 
    '2015-03-05 - 2015-04-05', 
    '2015-04-06 - 2015-05-06', 
    '2015-05-07 - 2015-06-08', 
    '2015-06-09 - 2015-07-10', 
    '2015-07-11 - 2015-08-11', 
    '2015-08-12 - 2015-09-12', 
    '2015-09-13 - 2015-10-14', 
    '2015-10-15 - 2015-11-16', 
    '2015-11-17 - 2015-12-18', 
    '2015-12-19 - 2015-12-31' 
].reverse(); 
$('#container').highcharts({ 
    legend: { enabled: false}, 
    xAxis: { 
     title: { text: null}, 
     categories: chartCategories, 
     tickmarkPlacement: 'on', 
     labels: { 
      useHTML: false, 
      step: 2, 
      rotation: -40 
     }, 
     y: 30 
    }, 

    series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse() 
    }] 
});