Добавить другой цвет в линейке X в зависимости от процента

Question

Я хочу добавить разные цвета для частей бара на основе частичного заполнения.

В тот момент, когда частичное заполнение равно 0,5 (50%), половина бара становится темнее зеленого. Есть ли способ определить цвет в баре в процентах?

Например, 0-49 делают частичное заполнение красным, а остальное белым. 50-100 делают частичное заполнение зеленым, а остальные белым и т. Д.

https://jsfiddle.net/sg0co5au/11/

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Highcharts X-range'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: ['Prototyping', 'Development', 'Testing'],
        reversed: true
    },
    series: [{
        name: 'Project 1',
        // pointPadding: 0,
        // groupPadding: 0,
        borderColor: 'gray',
        pointWidth: 20,
        colour:'#FF0000',
        data: [{
            x: Date.UTC(2014, 10, 21),
            x2: Date.UTC(2014, 11, 2),
            y: 0,
            partialFill: 0.50,
            color:'#469E5A'
        }, 
        ],
        dataLabels: {
            enabled: true
        }
    }]

});

Answer 1

Я вижу, что фоновый прямоугольник имеет класс "highcharts-point highcharts-color-0 highcharts-partfill-original" со значением заполнения #469E5A, Изменить это на "white" где бы вы не определили его CSS.

Наложение на это <rect x="6.5" y="85.5" width="696" height="20" rx="3" ry="3" class="highcharts-partfill-overlay" clip-path="url(#highcharts-51rfx2r-4)" stroke="gray" stroke-width="1" fill="rgb(0,82,14)"></rect>

Для цвета в процентах используйте переменную для хранения процента, например percent

if(percent<=49){
    document.getElementsByClassName("highcharts-partfill-overlay").setAttribute("fill", "red")
}
else if(percent>49){
    document.getElementsByClassName("highcharts-partfill-overlay").setAttribute("fill", "green")
}

Вы можете изменить цвет поля фона, используя document.getElementsbyClassName()

Answer 2

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

Сначала установите параметры диаграммы для переменной, чтобы вы могли обратиться к ним позже

var thisChart = Highcharts.chart('container', { /* your options here */ });

Затем, после загрузки диаграммы, проверьте, находится ли заливка ниже или выше 50 (в этом случае 0,5, чтобы соответствовать значению, которое вы установили в partialFill) и использовать series.update() функция ( https://api.highcharts.com/class-reference/Highcharts.Series) для изменения цвета:

if (thisChart.series[0].data[0].partialFill < 0.5) {
  thisChart.series[0].update({
    partialFill: {
      fill: 'red'
    }
  });
} else {
  thisChart.series[0].update({
    partialFill: {
      fill: '#469E5A'
    }
  });
}

Я сделал несколько небольших изменений в вашем коде. Во-первых, я явно установить серию fill цвет на зеленый вы выбрали. Затем я устанавливаю цвет ваших данных на белый. Это делает цвет частичной заливки цветом серии, а остальное пространство - белым. Затем, когда вы проверяете partialFill значение после построения графика, если значение ниже 0,5, заполненное значение будет красным.

  series: [{
    name: 'Project 1',
    borderColor: 'gray',
    pointWidth: 20,
    partialFill: {
      fill:'#469E5A' /* default color of the filled part of the bar */
    },
    data: [{
      x: Date.UTC(2014, 10, 21),
      x2: Date.UTC(2014, 11, 2),
      y: 0,
      partialFill: 0.50,
      color: 'white' /* color of the unfilled part of the bar */
    }],
    dataLabels: {
      enabled: true
    }
  }]

Смотрите обновленную версию своей скрипки здесь: https://jsfiddle.net/brightmatrix/sg0co5au/46/

Я надеюсь, что эта информация полезна для вас.