Блог

Я хотел бы изменить цвет отдельной точки, где ее значение меньше 60%.

(Например, измените синий цвет двух точек, которые находятся в розовой области, на красный.)

Возможно ли это?

Заранее спасибо!

Javascript:

 Highcharts.chart('container', {

  chart: {
    polar: true,
    type: 'line'
  },

  title: {
    text: 'Budget vs spending',
    x: -80
  },

  pane: {
    size: '80%'
  },

  xAxis: {
    categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
      'Information Technology', 'Administration'],
    tickmarkPlacement: 'on',
    lineWidth: 0
  },

  yAxis: {
     gridLineInterpolation: 'polygon',
     lineWidth: 0,
     min: 0,
     max: 100
  },

  tooltip: {
    shared: true,
    pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
  },

  legend: {
    align: 'right',
    verticalAlign: 'top',
    y: 70,
    layout: 'vertical'
  },

  series: [{
    name: 'Allocated Budget',
    color: 'blue',
    pointPlacement: 'on',
    data: [83, 79, 40, 35, 97, 80],
    pointPlacement:'on',

  }, {
    name: 'lower than 60%',
    data: [60,60,60,60,60,60],
    pointPlacement: 'on',
    lineWidth: 2,
    type: 'area',
    color: '#ffbce6',
    dashStyle: 'shortdash',
  }]

});
  

JS Fiddle

Один из вариантов — изменить данные для вашего Allocated Budget ряда на этот:

data: [83, 79, {y:40, color:'red'}, {y:35, color:'red'}, 97, 80]

Проверьте обновленный fiddle https://jsfiddle.net/mpof48nu