Гистограмма Высокие диаграммы

Question

Как мне получить гистограмму?

Мне нужен такой график:

Я следовал инструкциямотсюда, но я не могу правильно определить остановки.https://www.safaribooksonline.com/library/view/learning-highcharts/9781849519083/ch04s04.html

Это мои остановки:

 stops: [
        [0, '#ffffff'],
        [1, '#ff0000'],
        [2, '#f3f03c'],
        [3, '#FFA500'],
        [4, '#02c102']
]

Пожалуйста, совет.

var value = "3.0";

Highcharts.chart('barGauge', {
  chart: {
    type: 'bar',
    plotBorderWidth: 2,
    plotBackgroundColor: '#D6D6EB',
    plotBorderColor: '#D8D8D8',
    plotShadow: true,
    spacingBottom: 43,
    width: 350,
    height: 120
  },
  title: {
    text: ''
  },
  credits: {
    enabled: false
  },
  xAxis: {
    tickLength: 0
  },
  yAxis: {
    title: {
      text: null
    },
    labels: {
      y: 1
    },
    min: 0,
    max: 4,
    tickInterval: 1,
    minorTickInterval: 1,
    tickWidth: 1,
    tickLength: 8,
    minorTickLength: 5,
    minorTickWidth: 1,
    minorGridLineWidth: 0
  },
  legend: {
    enabled: false
  },
  series: [{
    borderColor: '#7070B8',
    borderRadius: 3,
    borderWidth: 1,
    color: {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 1,
        y2: 0
      },
      stops: [
        [0, '#ffffff'],
        [1, '#ff0000'],
        [2, '#f3f03c'],
        [3, '#FFA500'],
        [4, '#02c102']
      ]
    },
    pointWidth: 50,
    data: [parseInt(value)]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="barGauge"></div>

Таким образом, если значение равно 1, полоса должна прогрессировать от 0 до 1 и быть красной.Поэтому, если значение равно 2, полоса должна перейти от 0 до 2 и быть желтой.Поэтому, если значение равно 3, полоса должна перейти от 0 до 3 и быть оранжевой.Поэтому, если значение равно 4, полоса должна перейти от 0 до 4 и быть зеленой.

Answer 1

Вы можете создать массив зон и применить определенный цвет к каждому диапазону значений.

Массив, определяющий зоны внутри серии.Зоны могут быть применены к оси X, оси Y или оси Z для пузырьков, в соответствии с параметром zoneAxis.Определения зоны должны быть в порядке возрастания относительно значения.

const gaugeValue = 4;

Highcharts.chart('barGauge', {
  chart: {
    type: 'bar',
    height: 120
  },
  title: {
    text: ''
  },
  yAxis: {
    min: 0,
    max: 4,
    tickInterval: 1,
    title: {
      text: null
    },
  },
  legend: {
    enabled: false
  },
  series: [{
    data: [parseInt(gaugeValue)],
    zones: [{
        value: 1,
        color: '#ffffff'
      }, {
        value: 2,
        color: '#ff0000'
      },
      {
        value: 3,
        color: '#f3f03c'
      },
      {
        value: 4,
        color: '#FFA500'
      },
      {
        value: 5,
        color: '#02c102'
      }
    ]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="barGauge"></div>

---

jsfiddle