css - 如何使用 highcharts 实现此图

Question

我怎样才能使下面的图表尽可能准确？

我正在尝试用 highcharts 实现下图中的图表，我遇到的问题是我无法实现渐变和紫色切割线

这是我目前所做的:jsFiddle

$(function () {
    $('#container').highcharts({
    chart: {
      type: 'areaspline'
    },
  options: {
    title: {
      text: "Historical report"
    },
    heigth: 200

  },
  legend: {
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'top',
    x: 150,
    y: 100,
    floating: true,
    borderWidth: 1,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
  },
  xAxis: {
    categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
    plotBands: [
      {
        from: 4.5,
        to: 6.5,
        color: 'rgba(68, 170, 213, .2)'
      }
    ]
  },
  yAxis: {
    title: {
      text: 'Fruit units'
    }
  },
  tooltip: {
    shared: true,
    valueSuffix: ' units'
  },
  credits: {
    enabled: false
  },
  plotOptions: {
    areaspline: {
      fillOpacity: 0.5
    }
  },
  series: [
    {
      name: 'John',
      data: [3, 9, null, 5, 4, 10, 12],
      lineColor: "#5A66AF"
    }, {
      name: 'Jane',
      data: [1, 10, null, 3, 3, 5, 4],
      lineColor: '#47a06b'
    }, {
      name: 'Roberto',
      data: [10, 15, null, 15, 9, 9, 4],
      lineColor: '#2ba9db'
    }
  ]
});

});

Answer 1

线条由DashStyle属性实现:

• > http://api.highcharts.com/highcharts#plotOptions.line.dashStyle

渐变填充是在 fillColor 属性中定义渐变停止点的问题:

• http://api.highcharts.com/highcharts#plotOptions.area.fillColor

• http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/area-fillcolor-gradient/

(尽管如此，FWIW，渐变的极端白色端 reeeeally 让人分心......)