Кнопки в Highcharts и название диаграммы типа

Question

Мне нужно создать таблицу, используя Highcharts, как на картинке выше.

Итак, мне нужно знать:

1. Как может варьироваться Кнопки выбора позиционироваться, как на картинке? или это возможно?

1.1 Если кнопки диапазона не могут быть расположены так, можно ли использовать простые кнопки html? и в этом случае, как я могу взаимодействовать с данными Highcharts.

2. Каково название диаграммы с полосой в черном круге и от красного до зеленого градиента (калибр?).

Answer 1

this question Взято из:

установка высота больше ширины необходимо, чтобы получить расположение прямо между браузерами. Применение левого и правого заполнения также поможет в компоновке и позиционировании.

Для Chrome используйте -webkit-внешний вид: ползунок-вертикальный.

Для IE используйте режим записи: bt-lr.

Для Firefox добавьте атрибут orient = "vertical" в html. Жаль, что они сделали это так. Визуальные стили должны управляться с помощью CSS, а не 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">

Answer 2

1. Нет API для этого.

1.1. Кнопки HTML могут вызвать setExtremes() на xAxis диаграммы.

2. Это не серийный тип. Это colorAxis. Тем не менее, у вас есть только статическое изображение, так что это может быть что-то другое.