Двойная ось x на той же линии с Highcharts. Возможное?

Question

Можем ли мы создать диаграмму по оси x, такую ​​как this, используя Highcharts? Если да, может кто-нибудь, пожалуйста, укажите некоторые указатели?

Отображаются данные за три года. т.е. 2010,2011, 2012

https://www.adr.com/DRDetails/CorporateActions?cusip=055622104

Answer 1

Использование highstocks (Highcharts менее известных одноуровневые), вы можете сделать что-то вроде того, что вы ищете. Проверьте это fiddle

$(function() { 
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) { 

    // split the data set into ohlc and volume 
    var ohlc = [], 
     volume = [], 
     dataLength = data.length; 

    for (i = 0; i < dataLength; i++) { 
     ohlc.push([ 
      data[i][0], // the date 
      data[i][1], // open 
      data[i][2], // high 
      data[i][3], // low 
      data[i][4] // close 
     ]); 

     volume.push([ 
      data[i][0], // the date 
      data[i][5] // the volume 
     ]) 
    } 

    // set the allowed units for data grouping 
    var groupingUnits = [[ 
     'week',       // unit name 
     [1]        // allowed multiples 
    ], [ 
     'month', 
     [1, 2, 3, 4, 6] 
    ]]; 

    // create the chart 
    $('#container').highcharts('StockChart', { 

     rangeSelector: { 
      selected: 1 
     }, 

     title: { 
      text: 'AAPL Historical' 
     }, 

     yAxis: [{ 
      title: { 
       text: 'OHLC' 
      }, 
      height: 200, 
      lineWidth: 2 
     }, { 
      title: { 
       text: 'Volume' 
      }, 
      top: 300, 
      height: 100, 
      offset: 0, 
      lineWidth: 2 
     }], 

     series: [{ 
      type: 'area', 
      name: 'AAPL', 
      data: ohlc, 
      dataGrouping: { 
       units: groupingUnits 
      } 
     }, { 
      type: 'area', 
      name: 'Volume', 
      data: volume, 
      yAxis: 1, 
      dataGrouping: { 
       units: groupingUnits 
      } 
     }] 
    }); 
}); 

});

Answer 2

Представляется возможным, но в другом виде. одна ось сверху, а другая - внизу. Вы установили напротив true, как и для оси y. Посмотрите на этот вопрос в Highcharts forum

<div id="container" style="height: 400px; width: 500px"></div> 

<script type="text/javascript"> 

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container' 
    }, 
    xAxis: [{ 
     type: 'datetime', 
    },{ 
     type: 'datetime', 
     opposite: true 
    }], 

    series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
     pointStart: Date.UTC(2010, 0, 1), 
     pointInterval: 24 * 3600 * 1000 // one day 
    },{ 
     data: [176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0], 
     pointStart: Date.UTC(2010, 0, 10), 
     pointInterval: 24 * 3600 * 1000, // one day 
     xAxis: 1 
    }] 
}); 

</script> 

для рабочего примера, посмотрите на эту jsfilddle

Answer 3

Вы можете просто использовать Highcharts сгруппированных категории плагин, посмотрите: https://github.com/blacklabel/grouped_categories

Answer 4

Старые ответы не работать для меня в JSFiddle. Вот рабочий пример, если это поможет кто-нибудь:

http://jsfiddle.net/kPqKW/

$(function() { 
    $('#container').highcharts({ 

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

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
      pointStart: Date.UTC(2010, 0, 1), 
      pointInterval: 24 * 3600 * 1000 // one day 
     }, { 
      data: [176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0], 
      pointStart: Date.UTC(2010, 0, 10), 
      pointInterval: 24 * 3600 * 1000, // one day 
      xAxis: 1 
     }] 

    }); 
}); 

Answer 5

вы можете пройти через эту скрипку https://jsfiddle.net/ajaytripathi10/z8mrwhxz/. Надеюсь, это поможет.

$(function() { 
$('#container').highcharts({ 
    title: { 
     text: 'Shared tooltip chart' 
    }, 
    xAxis: [{ 
     type: 'datetime', 
     id: 'x1' 
    }, { 
     type: 'datetime', 
     id: 'x2', 
     opposite: true 
    }], 
    yAxis: { 
     min: 0 
    }, 
    tooltip: { 
     shared: true, 
     useHTML: true, 
     formatter: function() { 
      var tooltip = ''; 
      var i, len; 
      tooltip += '<small>Apple</small>'; 
      tooltip += '<table>'; 
      for (i = 0, len = 4; i < len; i++) { 
        if(this.points[i] != undefined){ 
      if(this.points[i].series.name.indexOf('Apple') >= 0){ 
       tooltip += '<tr>'; 
       tooltip += '<td style="color: ' + this.points[i].series.color + '">\u25CF</td>'; 
       tooltip += '<td>' + Highcharts.dateFormat('%Y-%m-%d', this.points[i].x) + ':</td>'; 
       tooltip += '<td style="text-align: right"><b>' + this.points[i].y + '</b></td>'; 
       tooltip += '</tr>'; 
       } 
       } 
      } 
      tooltip += '</table>'; 
      tooltip += '<small>Mango</small>'; 
      tooltip += '<table>'; 
      for (i = 0, len = 4; i < len; i++) { 
        if(this.points[i] != undefined){ 
      if(this.points[i].series.name.indexOf('Mango') >= 0){ 
       tooltip += '<tr>'; 
       tooltip += '<td style="color: ' + this.points[i].series.color + '">\u25CF</td>'; 
       tooltip += '<td>' + Highcharts.dateFormat('%Y-%m-%d', this.points[i].x) + ':</td>'; 
       tooltip += '<td style="text-align: right"><b>' + this.points[i].y + '</b></td>'; 
       tooltip += '</tr>'; 
       } 
       } 
      } 
      tooltip += '</table>'; 
      return tooltip; 
     } 
    }, 
    series: [{ 
     name: 'Apple', 
     id: 'series1', 
     xAxis: 'x1', 
     color: 'rgba(255, 0, 0, 1.0)', 
     data: [5, 3, 4, 7, 6, 1, 0], 
     pointInterval: 1000 * 60 * 60 * 24, 
     pointStart: Date.UTC(2015, 2, 10) 
    }, { 
     name: 'Apple New', 
     id: 'series2', 
     //linkedTo: 'series1', 
     xAxis: 'x2', 
     color: 'rgba(255, 180, 180, 1.0)', 
     data: [4, 5, 5, 6, 1, 3, 4], 
     pointInterval: 1000 * 60 * 60 * 24, 
     pointStart: Date.UTC(2015, 2, 17) 
    },{ 
     name: 'Mango', 
     id: 'series3', 
     xAxis: 'x1', 
     color: 'rgba(255, 0, 0, 1.0)', 
     data: [15, 13, 14, 17, 16, 11, 10], 
     pointInterval: 1000 * 60 * 60 * 24, 
     pointStart: Date.UTC(2015, 2, 10) 
    }, { 
     name: 'Mango New', 
     id: 'series4', 
     //linkedTo: 'series1', 
     xAxis: 'x2', 
     color: 'rgba(255, 180, 180, 1.0)', 
     data: [14, 15, 15, 16, 11, 13, 14], 
     pointInterval: 1000 * 60 * 60 * 24, 
     pointStart: Date.UTC(2015, 2, 17) 
    }] 
}); 

});

Answer 6

Полный код для создания горизонтальной и вертикальной линии в сплайне Highcharts

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<script src="https://code.highcharts.com/highcharts.js"></script> 

<script src="https://code.highcharts.com/modules/exporting.js"></script> 

</head> 
<body> 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
<script> 
Highcharts.chart('container', { 
    chart: { 
     type: 'spline', 

    }, 
    title: { 
     text: 'sample charts for both horizontal and vertical line' 
    }, 
    subtitle: { 
     text: 'Source: WorldClimate.com' 
    }, 
    xAxis: { 
    gridLineWidth: 1, 
     minPadding: 2, 
     maxPadding: 2, 
     maxZoom: 10 , 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 
    yAxis: { 

     title: { 
      text: 'Temperature' 
     }, 

     labels: { 
      formatter: function() { 
       return '$'+this.value; 
      } 
     }, 

    }, 
    tooltip: { 
     crosshairs: true, 
     shared: true 
    }, 
    plotOptions: { 
     spline: { 
      marker: { 
       radius: 4, 
       lineColor: '#666666', 
       lineWidth: 1 
      } 
     } 
    }, 
    series: [{ 
     // name: '', 

     data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 23.3, 18.3, 13.9, 9.6] 

    }] 
}); 
</script> 
</body> 
</html>