Change Graph Series Цвет заливки в Highcharts

Question

, как показано на картинке, я хочу, чтобы изменить заливку цвет точкой (имеется в виду состояние проекта в моем случае так), visual for my chart

код я использовал до сих пор для достижения этой цели ниже,

$(function() { 
    $('#ao-projectssummry-chart').highcharts({ 
     type: "spline", 
     title: null, 
     borderRadius : null, 
     xAxis: { 
      categories: ['May2016', 'June2016', 'July2016', 'August2016', 'september2016', 'November2016'], 
      opposite: true 
      //type: 'datetime', 
      //min: Date.UTC(2011, 4, 31), 
      //max: Date.UTC(2012, 11, 6) 
     }, 
     yAxis: { 
      min: 0, 
      max: 5, 
      title : null 
     }, 
     plotOptions: { 
      series: { 
       lineWidth: 20, 
       borderRadius: null, 
       radius: 0 
      }, 
      marker: { 
       radius : 0 
      } 

     }, 
     credits : { 
      enabled : false 
     }, 
     legend: { 
      enabled : false 
     }, 

     series: [{ 
      name: "Project 1", 
      data: [1, 1, { 
       y: 1, 
          marker: { 
           symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)', 
           overlapping: true 
          } 
       }, { 
        y: 1, 
          marker: { 
           symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)' 
          } 
       }, { 
        y: 1, 
        marker: { 
         symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)' 
        } 
       } 
       ] 
     }, 
     { 
      name: "Project 2", 

      data: [2, { 
       y: 2, 
       marker: { 
        symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)', 
        overlapping : true 
       } 
      }, 2, 2, 2, { 
       y:2, 
       marker: { 
        symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)', 
        overlapping: true 
       } 
      }, 
      ] 
     }] 
    }); 
}); 

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

Любая помощь будет оценена! заранее спасибо.

Answer 1

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

Вот такой подход, который позволяет получить то, о чем вы просите, используя тип линии columnrange вместо строки. Это обеспечивает большую гибкость и контроль.

Идея:

Во-первых, установить тип, и инвертировать диаграмму (columnrange представляет собой вертикальный тип серии; чтобы сделать его по горизонтали, инвертировать график - ось х теперь по вертикальной оси, а ось y теперь является горизонтальной осью):

chart: { 
    type: "columnrange", 
    inverted: true 
} 

Обновление настроек оси соответственно (замена x на y).

Задайте свои данные значением x, значением low (начальная точка) и значением high (конечная точка).

Установите цвет, что вы хотите:

data: [{ 
    x: 1, 
    low: Date.UTC(2016,3,15), 
    high: Date.UTC(2016,4,21), 
    color: 'rgb(0,156,255)' 
},{ 
    x: 3, 
    low: Date.UTC(2016,2,7), 
    high: Date.UTC(2016,6,15), 
    color: "rgb(204,0,0)" 
}] 

Чтобы разместить маркера, добавить отдельную серию, либо линию или рассеивание (я использую линию, с lineWidth: 0, потому что серия рассеивает использовать другую модель подсказки , и не так легко интегрироваться с другими сериями, если всплывающая подсказка важна для вас, но в остальном они работают одинаково).

серии Маркер:

{ 
    name: 'Markers', 
    type: 'line', 
    data: [ 
    { 
    x: 1, 
    y: Date.UTC(2016,2,15), 
    marker: { 
     fillColor:"#9CCB00" 
    } 
    } 

Пример:

• https://jsfiddle.net/jlbriggs/x7c3t81n/

Выход:

Answer 2

Вы должны указать, что в data массиве непосредственно:

Пример кода:

data: [5,4,3,2,5,6,7,9, {y:6, marker: { enabled: true, radius: 10, fillColor: 'red'}},3,2,5,6,7] 

Все, что вы можете указать в plotOptions, что влияет на точку данных, вы можете указать в этом путь для конкретной точки данных.

Любая точка, для которой вы ничего не указываете, следует параметрам по умолчанию или параметрам, указанным в параметрах plotOptions.

Fiddle:

• http://jsfiddle.net/jlbriggs/3d3fuhbb/126/

Выход: