为高图区域图表应用外边框

我正在实现模拟中显示的区域图表，但在某些部分有严格要求，并且无法获得http://api.highcharts.com/highcharts中提供的用于配置图表的选项。

这是模拟外观。

到目前为止我取得的成就是：

小提琴演示

所以我无法实现

1.背景色

backgroundColor: { linearGradient: false, stops: [ [0, 'rgb(255, 255, 255)'], [1, 'rgb(200, 200, 255)'] ] }, 

2。 只有外边界线。 （如模拟中所示）

3。 在hover中显示所有3个标签。 （如模拟中所示）

4。 像“CPM IMPS SPEND BY TIME”这样的传奇颜色我的意思是我想要在模拟中实现同样的效果。

最后要点：

Answer 1

好..

1.背景颜色：

 chart: { backgroundColor: 'black', //for whole plot name: 'IMPS', data: [ ... ], color: 'rgb(213, 156, 72)' //for one area 

2。 只有外边界线。 （如模拟中所示）

  yAxis: [{ lineWidth: 1, title: { text: '' }, labels: { formatter: function () { return this.value / 1000 + 'k'; } }, gridLineWidth: 0, minorGridLineWidth: 0 }, { lineWidth: 1, title: { text: '' }, labels: { formatter: function () { return this.value / 1000 + 'k'; } }, gridLineWidth: 0, minorGridLineWidth: 0, linkedTo: 0, opposite: true }], 

3。 在hover中显示所有3个标签。 （如模拟中所示）

 tooltip: { pointFormat: '{series.name} ${point.y:,.0f} 
', //like in mock up shared: true, //all series crosshairs: true //vertical line }, 

4。 像“CPM IMPS SPEND BY TIME”这样的传奇颜色我的意思是我想要在模拟中实现同样的效果。

所以我已经回答了这个问题的答案

最后要点：

JS：

  tooltip: { backgroundColor: null, borderWidth: 0, shadow: false, useHTML: true, style: { padding: 0 }, 

现在您可以按照自己的喜好自定义工具提示：

 .highcharts-tooltip>span p { margin: 0; } .highcharts-tooltip>span span{ display: none; } #pCPM{background: rgb(87, 188, 0);} #pIMPS{background: rgb(213, 156, 72);} #pSPEND{background: rgb(12, 170, 226);} 

Highchart的API不允许您在轴上设置当前值，但您可以禁用默认标签并将手工标签放置在绝对位置，就像我已经使用图例一样。

简介FIDDLE