Highcharts样条和列排列

• Z时代
• 2024-01-10
• 分类：问答

我有一个图表，它有样条和一个理想情况下会反转的列的列，所以这些条横向运行，xAxis值将在y轴上。Highcharts样条和列排列

请参阅current code at jsfiddle。代码

相关部分：

$(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应该可以做到这一点。

如何在保持图形布局的其余部分时使列宽保持水平？

回答：

以上是 Highcharts样条和列排列 的全部内容， 来源链接： utcz.com/qa/265263.html