高图:刻度线和x轴点彼此远离

时间:2018-08-21 08:35:08

标签: ruby-on-rails ruby highcharts

一个问题是,该行的第一个点位于7月15日,但7月15日未显示在x轴上,而是将鼠标悬停在其上时显示,而该列的第一个点位于7月8日。 第二个问题是(条形和线形)两个点都具有距离,它们应该彼此相对对齐。
enter image description here

$('#container').highcharts({

    chart: {
        renderTo: 'container'
    },
    xAxis: [{
        type: 'datetime'
    }, {
        type: 'datetime'

    }],
    series: [{field_name: "ordered_revenue",   type: "spline",   name: "Grouped ordered_revenue",   connectNulls: true,   data:     [[1531681200000, 566.76],
[1531767600000, 604.26],
[1531854000000, 742.78],
[1531940400000, 545.55],
[1532026800000, 252.16],
[1532113200000, 468.67],
[1532199600000, 426.68]]},  {field_name: "ordered_revenue",   type: "column",   name: "Grouped ordered_revenue Prior Priod",   connectNulls: true,   xAxis: 1,   data:     [[1531681200000, 510.61],
[1531767600000, 346.74],
[1531854000000, 327.57],
[1531940400000, 269.34],
[1532026800000, 372.34],
[1532113200000, 231.38],
[1532199600000, 442.09]]}]

});

1 个答案:

答案 0 :(得分:0)

列系列导致另一种渲染xAxis的方式。您需要将列系列上的 pointPlacement 设置为 on

series: [{
    field_name: "ordered_revenue",
    type: "spline",
    name: "Grouped ordered_revenue",
    connectNulls: true,
    data: [
        [1531681200000, 566.76],
        [1531767600000, 604.26],
        [1531854000000, 742.78],
        [1531940400000, 545.55],
        [1532026800000, 252.16],
        [1532113200000, 468.67],
        [1532199600000, 426.68]
    ]
}, {
    field_name: "ordered_revenue",
    type: "column",
    pointPlacement: 'on',
    name: "Grouped ordered_revenue Prior Priod",
    connectNulls: true,
    xAxis: 1,
    data: [
        [1531681200000, 510.61],
        [1531767600000, 346.74],
        [1531854000000, 327.57],
        [1531940400000, 269.34],
        [1532026800000, 372.34],
        [1532113200000, 231.38],
        [1532199600000, 442.09]
    ]
}]

API参考:https://api.highcharts.com/highcharts/series.column.pointPlacement

实时演示:http://jsfiddle.net/BlackLabel/qp3wcgxo/