2015-06-18 105 views
0

我想绘制如下的图表,但x轴停止在11年年底,它不在此刻。我将max设置为19,但它不起作用。如何在11年结束后摆脱这些灰线?限制Highcharts x轴分组的类别和标签样式

另外对于x轴标签,我想减小第二个类别([1,2,3,4])和Year的字体大小,但是在标签样式中,字体大小属性应用于所有标签。

var l=19; 
var m=-0.6; 

new Highcharts.Chart({ 
      chart: { 
       renderTo: elementId, 
       spacingLeft: 10, 
       spacingRight: 10 
      }, 
      title: { 
       text: subject 
      }, 
      xAxis: { 
       categories: [{ 
        name: "Year 7", 
        categories: [1, 2, 3, 4] 
       }, { 
        name: "Year 8", 
        categories: [1, 2, 3, 4] 
       }, { 
        name: "Year 9", 
        categories: [1, 2, 3, 4] 
       }, { 
        name: "Year 10", 
        categories: [1, 2, 3, 4] 
       }, { 
        name: "Year 11", 
        categories: [1, 2, 3, 4] 
       }], 
       labels: { 
        style: { 
         fontSize: '7.5px' 
        } 
       }, 
       plotLines: [{ 
        color: '#5DA06E', 
        width: 2, 
        value: l 
       }, { 
        color: '#5DA06E', 
        width: 2, 
        value: -1 
       }], 
       //max: l 
      }, 

      yAxis: [{ 
       labels: { 
        enabled: false 
       }, 
       title: { 
        text: null 
       }, 
       min: 0, 
       max: 1000 
      }, 
       { 
        title: { 
         text: null 
        }, 
        labels: { 
         style: { 
          fontSize: '7.5 px' 
         }, 
         align: 'left', 
         x: 3, 
         formatter: function() { 
          var value = change[this.value]; 
          return value !== 'undefined' ? value : this.value; 
         } 
        }, 
        tickPositions: [0, 280, 360, 440, 520, 600, 680, 760, 840, 920, 1000], 
        gridLineColor: 'white', 
        opposite: true, 
        min: 0, 
        max: 1000 
       }], 

      series: [{ 
       type: 'line', 
       data: [[m, 0], [l, 280]], 
       color: '#A5DEC1', 
      }, { 
       type: 'line', 
       data: [[m, 80], [l, 360]], 
       color: '#94D0A3', 
      }, 
... 

enter image description here 强大的文本

回答

1

ml PARAMS不变?或者你能改变它们吗?如果是,那么请参阅:http://jsfiddle.net/TFhd7/373/

总之:类别保留了-0.5到0.5的分类索引。例如,Year7 - > 4表示3.5至4.5的x值。因此,根据这些信息让我们变更值:

var l = 19.5; 
var m = -0.5; 

现在修改极端和主要情节:

 plotLines: [{ 
      color: '#5DA06E', 
      width: 2, 
      value: l 
     }, { 
      color: '#5DA06E', 
      width: 2, 
      value: m 
     }], 
     max: l - 0.5, 
     min: m + 0.5,