Highcharts樣條和列排列

我有一個圖表，它有樣條和一個理想情況下會反轉的列的列，所以這些條橫向運行，xAxis值將在y軸上。Highcharts樣條和列排列

相關部分：

$(function() { 
$('#container').highcharts({ 
    chart: { 
     //type: 'spline' 
     //inverted: true, 
    }, 
    credits: { 
     enabled: false 
    }, 

    title: { 
     text: 'Polygon Graph: 109470 - North Penrith' 
    }, 

    xAxis: [{ 


     type: 'datetime', 


    }, { 
     type: 'category', 
     categories: ['Planning', 'Bulk Earthworks', 'DA Design', 'CC Design'] 

    }], 
    yAxis: [{ 
     opposite: true, 
     labels: { 
      format: '${value:,.0f}' 

     }, 

     title: { 
      text: 'Value ($)' 

     }, 

     min: 0 



    }, { 
     type: 'datetime', 


    }], 

    plotOptions: { 
     columnrange: { 
      dataLabels: { 
       enabled: true, 
       formatter: function() { 
        var d = new Date(this.y); 
        return d.getDate(); 
       } 
      } 
     } 
    }, 
    tooltip: { 
     formatter: function() { 
      return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %b %y', this.x) + ': ' + ' $' + this.y; 
     } 

    }, 

    series: [{ 
     name: 'Expected Costs', 

     data: [ 
      [Date.UTC(2013, 9, 29), 145000], 
      [Date.UTC(2013, 10, 6), 140000], 
      [Date.UTC(2013, 10, 13), 133000], 
      [Date.UTC(2013, 10, 20), 125000], 
      [Date.UTC(2013, 10, 27), 116000], 
      [Date.UTC(2013, 11, 3), 106000], 
      [Date.UTC(2013, 11, 10), 101000], 
      [Date.UTC(2013, 11, 17), 96000], 
      [Date.UTC(2013, 11, 24), 94000], 
      [Date.UTC(2013, 12, 1), 82000], 
      [Date.UTC(2013, 12, 8), 70000], 
      [Date.UTC(2013, 12, 15), 58000], 
      [Date.UTC(2013, 12, 22), 33000], 
      [Date.UTC(2013, 12, 29), 8000], 


      ], 
     color: 'red' 

    }, { 
     name: 'Actual Costs', 
     data: [ 
      [Date.UTC(2013, 9, 29), 135000], 
      [Date.UTC(2013, 10, 6), 133000], 
      [Date.UTC(2013, 10, 13), 125000], 
      [Date.UTC(2013, 10, 20), 116000], 
      [Date.UTC(2013, 10, 27), 104000], 
      [Date.UTC(2013, 11, 3), 89000], 
      [Date.UTC(2013, 11, 10), 84000], 
      [Date.UTC(2013, 11, 17), 78000], 
      //[Date.UTC(2013,11,24),75000 ], 
      //     [Date.UTC(2013,12,1),64000 ], 
      //     [Date.UTC(2013,12,8),59000 ], 
      //     [Date.UTC(2013,12,15),50000 ], 
      //     [Date.UTC(2013,12,22),25000 ], 
      //     [Date.UTC(2013,12,29),0 ] 

      ], 
     color: 'green' 
    }, { 
     name: 'Projected Costs', 
     data: [ 
     //[Date.UTC(2013,9,29),135000 ], 
     //     [Date.UTC(2013,10,6),133000 ], 
     //     [Date.UTC(2013,10,13),125000 ], 
     //     [Date.UTC(2013,10,20),116000 ], 
     //     [Date.UTC(2013,10,27),104000 ], 
     //     [Date.UTC(2013,11,3),89000 ], 
     //     [Date.UTC(2013,11,10),84000 ], 
     [Date.UTC(2013, 11, 17), 78000], 
      [Date.UTC(2013, 11, 24), 75000], 
      [Date.UTC(2013, 12, 1), 64000], 
      [Date.UTC(2013, 12, 8), 59000], 
      [Date.UTC(2013, 12, 15), 50000], 
      [Date.UTC(2013, 12, 22), 25000], 
      [Date.UTC(2013, 12, 29), 0] 

     ], 
     dashStyle: 'longdash' 
    }, { 
     name: 'Gantt', 
     type: 'columnrange', 
     //inverted: true, 
     xAxis: 1, 
     yAxis: 1, 
     data: [ 
      [Date.UTC(2013, 9, 29), Date.UTC(2013, 9, 30)], 
      [Date.UTC(2013, 9, 30), Date.UTC(2013, 10, 17)], 
      [Date.UTC(2013, 10, 18), Date.UTC(2013, 10, 30)], 
      [Date.UTC(2013, 10, 30), Date.UTC(2013, 11, 17)] 
     ], 

    }] 
});

我試圖從columnrange圖開始，並從那裏建造它，但是導致花鍵值繪圖從最小到最大（即使有逆向選擇）。這意味着將樣條列添加到樣條曲線基礎似乎是一個更好的主意。

我卡住了，好像highcharts應該可以做到這一點。

如何在保持圖形佈局的其餘部分時使列寬保持水平？

來源

2014-02-16 davo007

歡迎來到Stack Overflow！如果您可以添加代碼，而不是指向其他頁面的鏈接，則可以改進此問題。單純鏈接問題的麻煩在於，隨着時間的推移，它們往往會失效。如果您想出一種方法來改善您的答案，請點擊「編輯」。 –

不幸的是，當你使用倒置的選項，然後軸翻轉，所有系列都翻轉。這是默認行爲。你不能結合倒立和倒立的系列。

來源

2014-02-17 10:25:25

Highcharts樣條和列排列

回答

相關問題