如何改变highstock多系列数据的线型？

Question

然而我想要的是这样的：

绿线是过去的数据，直到三条线相交，交互后的蓝绿色和黑色是预测数据。

这是我到目前为止所尝试的：

$ ->
  seriesOptions = []
  seriesCounter = 0
  names = [
    'good'
    'bad'
    'average'
  ]
  current_time = new Date();
  # set data 
  window.scenario = $("#portfolio_chart").data('scenario')
  ###
  # Create the chart when all data is loaded
  # @returns {undefined}
  ###

  createChart = ->
    $('#portfolio_chart').highcharts 'StockChart',
      legend:
        enabled: true
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'top',
        y:25
      rangeSelector: selected: 5
      yAxis:
        labels: formatter: ->
          (if @value > 0 then ' + ' else '') + @value + '%'
        plotLines: [ {
          value: 0
          width: 2
          color: 'silver'
        } ]
      plotOptions:
        series:
          compare: 'value'
          turboThreshold: 0
      tooltip:
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>'
        valueDecimals: 2
        formatter: ->
          if this.x > current_time
            good = this.points[0]
            average = this.points[2]
            bad = this.points[1]
            date = '<b><span style="color: black"><b>Date:</b> ' + new Date(good.x) + '</span></b><br>'
            good_tooltip = '<span style="color:' + good.color + '">' + good.series.name + '</span> : <b>' + good.y + '</b> <br>'
            average_tooltip = '<span style="color:' + average.color + '">' + average.series.name + '</span> : <b>' + average.y + '</b> <br>'
            bad_tooltip = '<span style="color:' + bad.color + '">' + bad.series.name + '</span> : <b>' + bad.y + '</b> <br>'
            return date + good_tooltip + average_tooltip + bad_tooltip;
          else
            average = this.points[2]
            date = '<span style="color: black"><b>Date:</b> ' + new Date(average.x) + '</span></b><br>'
            average_tooltip = '<span style="color:' + average.color + '">' + average.series.name + '</span> : <b>' + average.y + '</b> <br>'
            return date + average_tooltip;
      series: seriesOptions
    return

  $.each names, (i, name) ->
    seriesOptions[i] =
      name: name
      data: scenario[name]
      type: 'spline'
    # As we're loading the data asynchronously, we don't know what order it will arrive. So
    # we keep a counter and create the chart when all the data is loaded.
    seriesCounter += 1
    if seriesCounter == names.length
      createChart()

这就是我的数据看起来像

{
  "good": [
    [
      1401494400000,
      8113.13579312755
    ],
    [
      1404086400000,
      10783.7898823944
    ],
    [
      1406764800000,
      9884.49351907268
    ],
    [
      1409443200000,
      10232.5275921684
    ],
    [
      1412035200000,
      7346.77658737733
    ],
    [
      1414713600000,
      9372.51299197348
    ] ............... ,
  "average": [
    [
      1401494400000,
      8113.13579312755
    ],
    [
      1404086400000,
      10783.7898823944
    ],
    [
      1406764800000,
      9884.49351907268
    ],
    [
      1409443200000,
      10232.5275921684
    ],
    [
      1412035200000,
      7346.77658737733
    ],
    [
      1414713600000,
      9372.51299197348
    ],
    [
      1417305600000,
      9911.7987635224
    ],
    [
      1419984000000,
      9502.02582437336
    ]........,
  "bad": [
    [
      1401494400000,
      8113.13579312755
    ],
    [
      1404086400000,
      10783.7898823944
    ],
    [
      1406764800000,
      9884.49351907268
    ],
    [
      1409443200000,
      10232.5275921684
    ],
    [
      1412035200000,
      7346.77658737733
    ],
    [
      1414713600000,
      9372.51299197348
    ],
    [
      1417305600000,
      9911.7987635224
    ],
    [
      1419984000000,
      9502.02582437336
    ],
    [
      1422662400000,
      8347.10066887184
    ].......
}

我的问题是如何让图表看起来像预期的图表，为一个非常绝对的问题道歉，但我对此有点新手？

如何将过去的数据分成区域分布图和未来的数据与不同的线型一致？

任何有关如何解决此问题的帮助都会有很大帮助。 谢谢！