javascript - Highcharts 中的按钮定位和图表类型的名称

Question

我需要使用 Highcharts 创建一个图表，如上图所示。

所以，我需要知道:

1. 范围选择器按钮如何放置在图片中？或者有可能吗？

1.1 如果范围按钮无法像那样定位，我可以使用简单的 html 按钮吗？在这种情况下，我该如何与 Highcharts 数据进行交互。

1. 带有黑色圆圈内的条形和红色到绿色渐变(仪表？)的图表的名称是什么。

Answer 1

取自this question :

setting height greater than width is needed to get the layout right between browsers. Applying left and right padding will also help with layout and positioning.

For Chrome, use -webkit-appearance: slider-vertical.

For IE, use writing-mode: bt-lr.

For Firefox, add an orient="vertical" attribute to the html. Pity that they did it this way. Visual styles should be controlled via CSS, not HTML.

欢迎您查看原始问题的代码。

关于渐变这个东西，用css把背景设置成线性渐变就可以轻松实现。完整代码:

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 20px;
    height: 175px;
    padding: 0 5px;
}
.gradientbg{
    background: -webkit-linear-gradient(green, white, red);
    background: -o-linear-gradient(green, white, red);
    background: -moz-linear-gradient(green, white, red);
    background: linear-gradient(green, white, red);

}

<input class="gradientbg" type="range" orient="vertical">