为 highchart 面积图应用外边框答案

【问题标题】：Apply outer border for the highchart area chart为 highchart 面积图应用外边框
【发布时间】：2014-06-17 13:57:57
【问题描述】：

我正在实现模型中显示的面积图，但在某些部分有严格要求，无法获得http://api.highcharts.com/highcharts 中可用的选项，用于将图表配置为原样。

这是模型外观。

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

Fiddle Demo

所以我无法实现

1.背景颜色

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

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

3 .悬停显示所有 3 个标签。（如模型所示）

4 .像“CPM IMPS SEND BY TIME”这样带有颜色的图例我的意思是我想达到与模型相同的效果。

实施的最后一点：

【问题讨论】：

标签： javascript jquery highcharts

【解决方案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 .悬停显示所有 3 个标签。（如模型所示）

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

4 .像“CPM IMPS SEND BY TIME”这样的图例，我的意思是我想达到与模型相同的颜色。

所以我已经在this question回答了如何做

实施的最后一点：

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

【讨论】：

"2 . 只有外边界线。（如模型所示）" 正如您在模型中看到的那样，沿 x 轴只有一条水平线，其值类似于 week1、week2... 和两端沿 y 轴的 2 条边界线。
再看一遍问题，附上一张带箭头的新图片。
亲爱的朋友，到目前为止，非常感谢您的帮助，但我认为，您错过了一点，所以我更新了最后一点，例如：“实施的最后一点：”请看图片显示，并帮助我，如果你能做到这一点。 :)
人，你是天才，感谢到目前为止的帮助，你渴望（滴答）。
嘿伙计，我有一些与 OOP 类型的 highchart stackoverflow.com/questions/24426303/… 相关的问题，你能帮我解决这个问题吗？