如何创建此类堆栈图

Question

这是一张股票图表。我无法创建这种类型的图表。有些东西我不知道。因为我可以创建这个：

JSFIDDLE

使用

$(function() {


  /**
   * In order to synchronize tooltips and crosshairs, override the
   * built-in events with handlers defined on the parent element.
   */
  $('#container1').add('#container2').add('#container3').bind('mousemove touchmove touchstart', function(e) {
    var chart,
      point,
      i,
      event;

    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
      chart = Highcharts.charts[i];
      event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
      point = chart.series[0].searchPoint(event, true); // Get the hovered point

      if (point) {
        point.highlight(e);
      }
    }
  });
  /**
   * Override the reset function, we don't need to hide the tooltips and crosshairs.
   */
  Highcharts.Pointer.prototype.reset = function() {
    return undefined;
  };

  /**
   * Highlight a point by showing tooltip, setting hover state and draw crosshair
   */
  Highcharts.Point.prototype.highlight = function(event) {
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh(this); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
  };

  /**
   * Synchronize zooming through the setExtremes event handler.
   */
  function syncExtremes(e) {
    var thisChart = this.chart;

    if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
      Highcharts.each(Highcharts.charts, function(chart) {
        if (chart !== thisChart) {
          if (chart.xAxis[0].setExtremes) { // It is null while updating
            chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
              trigger: 'syncExtremes'
            });
          }
        }
      });
    }
  }

  var chart1 = {

    chart: {
      renderTo: 'container1',
      type: 'line',

    },
    credits: {
      enabled: false
    },
    height: 120,
    width: 100,
    title: {
      text: 'MAY/Corn-MAY/Oats Spread Profir/Loss'
    },
    plotOptions: {
      series: {
        marker: {
          enabled: false
        }
      }
    },
    yAxis: {
      title: {
        text: 'MAY/Corn'
      },
      labels: {
        enabels: false
      },
    },
    xAxis: {
      labels: {
        enabled: false
      },
      crosshair: true,

      events: {
        setExtremes: syncExtremes
      },

      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
      name: 'MAY/Corn',
      labels: {
        enable: false
      },
      showInLegend: false,
      data: [29.9, 71.5, 150, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }],
  };
  var chart2 = {
    chart: {
      renderTo: 'container2',
      type: 'line'
    },
    credits: {
      enabled: false
    },
    plotOptions: {
      series: {
        marker: {
          enabled: false
        }
      }
    },
    yAxis: {
      title: {
        text: 'MAY/Oats'
      },
      labels: {
        enabels: false
      },
    },
    title: {

      text: null
    },
    xAxis: {

      crosshair: true,

      events: {
        setExtremes: syncExtremes
      },
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
      name: 'MAY/Oats',
      color: 'red',
      labels: {
        enable: false
      },
      showInLegend: false,
      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]
    }],
  };
  var chart3 = {
    chart: {
      renderTo: 'container3'
    },
    credits: {
      enabled: false
    },
    height: 120,
    width: 100,
    title: {
      text: null,
    },
    plotOptions: {
      series: {
        marker: {
          enabled: false
        }
      }
    },
    yAxis: {
      title: {
        text: 'Spread'
      },
      labels: {
        enabels: false
      },
    },
    xAxis: {
      labels: {
        enabled: false
      },
      crosshair: true,

      events: {
        setExtremes: syncExtremes
      },

      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
      name: 'Spread',
      color: 'blue',
      labels: {
        enable: false
      },
      showInLegend: false,
      data: [29.9, 71.5, 150, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }],
  };
  var chart4 = {

    chart: {
      renderTo: 'container4',
      type: 'column',
      navigator: {
        enabled: true
      },

    },
    height: 120,
    width: 100,
    title: {
      text: null,
    },
    yAxis: {
      title: {
        text: 'Spread'
      },
      labels: {
        enabels: false
      },
    },
    tooltip: {
      headerFormat: '<b>{series.name}</b><br>',
      pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
    },
    xAxis: {

      scrollbar: {
        enabled: true
      },

      rangeSelector: {
        enabled: true
      },
      labels: {
        enabled: true
      },
      crosshair: true,

      events: {
        setExtremes: syncExtremes
      },

      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
      scrollbar: {
        enabled: true
      },
      credits: {
        enabled: false
      },
      name: 'Profit/Loss in Dollars',
      colorByPoint: true,
      labels: {
        enable: false
      },
      showInLegend: false,
      data: [29.9, 71.5, 150, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }],
    credits: {
      enabled: false
    },
  };

  // draw on page load
  var drawChart1 = new Highcharts.Chart(chart1);
  var drawChart2 = new Highcharts.Chart(chart2);
  var drawChart3 = new Highcharts.Chart(chart3);
  var drawChart4 = new Highcharts.Chart(chart4);


  //	var newData = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];

  // draw on button click
  // $('#button').click(function () {
  //chart1.series[0].data = newData.reverse();
  //chart2.series[0].data = newData.reverse();
  // drawChart1 = new Highcharts.Chart(chart1);
  //drawChart2 = new Highcharts.Chart(chart2);
  // });


});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>


<div id="container1" style="height: 120px; margin-top: 1em"></div>
<div id="container2" style="height: 120px; margin-top: 1em"></div>
<div id="container3" style="height: 120px; margin-top: 1em"></div>
<div id="container4" style="height: 120px; margin-top: 1em"></div>