Highcharts 两个具有相同刻度间隔的日期时间 xAxis 图表答案

【问题标题】：Highcharts two datetime xAxis chart with same ticks intervalHighcharts 两个具有相同刻度间隔的日期时间 xAxis 图表
【发布时间】：2016-11-22 11:26:17
【问题描述】：

我两天思考问题，但我不知道用两个标准化日期时间 xAxis 制作图表。

我尝试使用 linkedTo 和规范化数据数组（但这有点过头了）。
linkedTo 仅显示重叠数据。
如果没有linkedTo 和规范化数组，刻度会显示为这样的异步

请帮帮我

What make chart like this?

$('#container').highcharts({
    yAxis: {
        gridLineWidth:0  
    },
    xAxis: [
      {
        gridLineWidth: 1,
        type: 'datetime',
        lineColor: '#ff9c00'
      },
      {
        type: 'datetime',
        opposite: true,
        lineColor: '#FF6B6B'
      }
    ],
    series: [
        {
            "name": "first",
            "data": [
                [
                    1479164400000,
                    7323
                ],
                [
                    1479160800000,
                    6204
                ],
                [
                    1479157200000,
                    3561
                ],
                [
                    1479153600000,
                    9706
                ],
                [
                    1479150000000,
                    2539
                ],
                [
                    1479146400000,
                    4570
                ],
                [
                    1479142800000,
                    4187
                ],
                [
                    1479139200000,
                    3631
                ],
                [
                    1479135600000,
                    7512
                ],
                [
                    1479132000000,
                    2456
                ],
                [
                    1479128400000,
                    6983
                ],
                [
                    1479124800000,
                    3511
                ],
                [
                    1479121200000,
                    2765
                ],
                [
                    1479117600000,
                    3401
                ],
                [
                    1479114000000,
                    2565
                ],
                [
                    1479110400000,
                    4425
                ],
                [
                    1479106800000,
                    4592
                ],
                [
                    1479103200000,
                    4328
                ],
                [
                    1479099600000,
                    2694
                ],
                [
                    1479096000000,
                    2787
                ],
                [
                    1479092400000,
                    11633
                ],
                [
                    1479088800000,
                    3311
                ],
                [
                    1479085200000,
                    2839
                ],
                [
                    1479081600000,
                    12620
                ]
            ]
        },
        {
            "name": "second",
            "data": [
                [
                    1479250800000,
                    22730
                ],
                [
                    1479247200000,
                    10695
                ],
                [
                    1479243600000,
                    12017
                ],
                [
                    1479240000000,
                    12110
                ],
                [
                    1479236400000,
                    9689
                ],
                [
                    1479232800000,
                    4288
                ],
                [
                    1479229200000,
                    3702
                ],
                [
                    1479225600000,
                    5575
                ],
                [
                    1479222000000,
                    5694
                ],
                [
                    1479218400000,
                    3098
                ],
                [
                    1479214800000,
                    9885
                ],
                [
                    1479211200000,
                    6587
                ],
                [
                    1479207600000,
                    3028
                ],
                [
                    1479204000000,
                    3281
                ],
                [
                    1479200400000,
                    12577
                ],
                [
                    1479196800000,
                    3886
                ],
                [
                    1479193200000,
                    4014
                ],
                [
                    1479189600000,
                    6553
                ],
                [
                    1479186000000,
                    2041
                ],
                [
                    1479182400000,
                    4056
                ],
                [
                    1479178800000,
                    4223
                ],
                [
                    1479175200000,
                    4920
                ],
                [
                    1479171600000,
                    5432
                ],
                [
                    1479168000000,
                    7857
                ],
                [
                    1479164400000,
                    7323
                ],
                [
                    1479160800000,
                    6204
                ],
                [
                    1479157200000,
                    3561
                ],
                [
                    1479153600000,
                    9706
                ],
                [
                    1479150000000,
                    2539
                ],
                [
                    1479146400000,
                    4570
                ],
                [
                    1479142800000,
                    4187
                ],
                [
                    1479139200000,
                    3631
                ],
                [
                    1479135600000,
                    7512
                ],
                [
                    1479132000000,
                    2456
                ],
                [
                    1479128400000,
                    6983
                ],
                [
                    1479124800000,
                    3511
                ],
                [
                    1479121200000,
                    2765
                ],
                [
                    1479117600000,
                    3401
                ],
                [
                    1479114000000,
                    2565
                ],
                [
                    1479110400000,
                    4425
                ],
                [
                    1479106800000,
                    4592
                ],
                [
                    1479103200000,
                    4328
                ],
                [
                    1479099600000,
                    2694
                ],
                [
                    1479096000000,
                    2787
                ],
                [
                    1479092400000,
                    11633
                ],
                [
                    1479088800000,
                    3311
                ],
                [
                    1479085200000,
                    2839
                ],
                [
                    1479081600000,
                    12620
                ]
            ],
            "xAxis": 1,
            "dashStyle": "shortdot"
        }
    ]
});

#container {
    min-width: 1024px;
    max-width: 1024px;
    height: 300px;
    margin: 1em auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

【问题讨论】：

您必须控制两个轴的刻度位置。在您提供的示例中，将axis.endOnTick 设置为true 就足够了。但是，使用不同的图表宽度可能还不够。 jsfiddle.net/wtaq5jcL
@morganfree 谢谢，但是，如果一天或多天不同（如示例），是不够的。我正在寻找解决方法
检查我的答案，现在应该是防弹的。

标签： charts highcharts

【解决方案1】：

我的解决方法如下：

获取底部轴刻度值
将值映射到像素
将像素映射到上轴值
将值设置为上轴刻度

所有的计算都可以在tickPositioner中完成。

tickPositioner: function() {
  var axisTop = this,
    axisBottom = this.chart.xAxis[0],
    ticksBottom = axisBottom.tickPositions;

  var ticksTop = ticksBottom.map(function(tickValue) {
    return axisTop.toValue(axisBottom.toPixels(tickValue));
  });

  return ticksTop;
},

示例：https://jsfiddle.net/439adgpa/

在刻度定位器中设置刻度位置后，您必须手动设置正确的格式或从底部轴刻度使用它。

labels: {
  format: '{value:%H:%M}'
}

或

ticksTop.info = ticksBottom.info;

示例：https://jsfiddle.net/439adgpa/1/

【讨论】：

很好的解决方法:) 这是第一部分，也需要点同步。但无论如何，我建议功能请求，因为需要相同，仅适用于 pointsInterval :)

【解决方案2】：

使用堆叠的系列。 yAxis 堆叠并编号为 0,1,2。 Here is an example fiddle

               {
                      name : 'First',
                      data :data for first, 
                      zIndex : 1,
                      lineWidth:3,
                      color:'red',
                      yAxis: 0 ,
                      marker : {
                          enabled : false

                      } 
                  }, {
                      name : 'second',
                      data : data for second, 
                      lineWidth:3,
                      zIndex : 1,
                      yAxis: 1 ,
                      color:'#BE6230',
                      marker : {
                          enabled : false

                      } 
                  }

【讨论】：

我们需要在同一个 yAxis（同一个平面）上的图表。用于比较日期范围的系列（例如本周和前一周）。堆叠不给做这个。