Question

我正在尝试使用倾斜的x轴创建线高图。图像粗略地概述了我想要实现的目标。我希望x轴倾斜，网格线也要从3月开始倾斜，如图所示。

我无法附上图片，请查看以下代码（请不要介意初学者的编码以获取行，我还在学习）

$(function () {
$('#container').highcharts({
    chart: {
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 144.0, 176.0]        
    }]
}, function(c){
    c.renderer.arc(170, 330, 450, 0, -Math.PI/35, -Math.PI/35).attr({
    fill: '#FCFFC5',
    stroke: 'black',
    'stroke-width': 1
    }).add();
    c.renderer.arc(170, 215, 450, 0, -Math.PI/35, -Math.PI/35).attr({
    fill: '#FCFFC5',
    stroke: 'black',
    'stroke-width': 1
    }).add();    
});

包含在jsfiddle。

中

另外，我试图为倾斜范围设置颜色。据我所知，我可以通过将面积图与线组合来实现这一点，这样区域图将作为背景来获得我想要的颜色和倾向。我在绘图带中寻找选项，但找不到出路。

非常感谢任何帮助。

Answer 1

我不确定你需要的是什么：http://jsfiddle.net/Ff2nW/42/

您可以使用arearange来实现此目标：

$('#container').highcharts({
    chart: {
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },



    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 144.0, 176.0]        
    },{
        type: 'arearange',
        data: [[3,0,100],[11,25,125]]
    }]
});

高位图中倾斜的x轴和网格线

1 个答案: