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

Question

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

1. 我尝试使用linkedTo并规范化数据阵列（但这种过度杀伤）。
2. linkedTo仅显示重叠数据。
3. 如果没有linkedTo和规范化数组，则ticks显示为async，就像这样

请帮帮我

What make chart like this?

＆＃13;
＆＃13;
$('#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"
        }
    ]
});
＆＃13;
#container {
    min-width: 1024px;
    max-width: 1024px;
    height: 300px;
    margin: 1em auto;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

使用堆叠系列相互叠加。 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

                      } 
                  }

Answer 2

我的解决方案如下：

1. 抓住底部轴刻度值
2. 将值映射到像素
3. 将像素映射到顶轴值
4. 将值设置为顶轴刻度

所有计算都可以在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/