具有不同边框颜色的高图表区域范围图形

Question

我正在使用高图来绘制图形。目前使用区域范围图。我想给区域范围图的边框赋予不同的颜色。并用白色填充内部。我如何实现这一点。当前图形如下所示。我想用白色和不同的边框颜色填充它。

         name: 'Data',
         pointInterval: 3600 * 1000,
         data: noData,
         type: 'arearange',
         lineWidth: 0,
         linkedTo: ':previous',
         color : '#D2D2D2',                
         zIndex: 0,
         enableMouseTracking: false

Answer 1

它很容易实现。可以通过plotOption设置控制这些属性。

let entityCoreData = NSEntityDescription.insertNewObject(forEntityName: "Hadith", into: context)

entityCoreData.setValue(firstEntity, forKey: "firstAttribute")

do {
    try context.save()
} catch {
    print("issue by saving data")
}

Here是一个有用的工具供您参考。

希望这就是你要找的东西。

修改 如果您有多个区域范围，那么您可以执行如下所示

plotOptions: {
    arearange: {
        lineColor: 'blue',
        fillColor: 'grey'
    }
},

Answer 2

根据您的问题和其他答案的评论：

您可以为绘图区域添加边框，并删除系列绘图的x轴边缘填充，如下所示：

JSFiddle demo：http://jsfiddle.net/u17h0h9b/

＆＃13;

＆＃13;

$(function() {
  var chart = Highcharts.chart('container', {
    chart: {
      plotBackgroundColor: '#afa',
      plotBorderColor: '#f0f',
      plotBorderWidth: 2
    },
    xAxis: {
    	minPadding: 0,
      maxPadding: 0
    },
    series: [{
    	type: 'area',
      color: '#f0f',
      fillColor: 'rgba(0,100,200,0.3)',
      data: [1, 2, 3, 4, 5, 6, 7]
    }]
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

＆＃13;

＆＃13;

＆＃13;