Настройка цветов отдельных серий в HighCharts

Question

Я использую HighCharts для линейного графика, и я пытаюсь изменить цвет линии для каждой серии. Я нашел этот пример here, но данные жестко закодированы. Мои данные извлекаются из базы данных Sql и передаются на HTML-страницу с использованием некоторого кода VB.

 var chart; 
     $(document).ready(function() { 
      chart = new Highcharts.Chart({ 
       chart: { 
        renderTo: 'container', 
        defaultSeriesType: 'column' 
       }, 
       title: { 
        text: 'Chart Title' 
       }, 
       subtitle: { 
        text: 'Chart subtitle' 
       }, 
       xAxis: { 
        categories: [<%= GraphDate %>] 
        , 
        labels: 
        { 
         rotation: -45, 
         align: 'right', 
         style: 
         { 

         } 
        } 
       }, 
       yAxis: { 
        min: 160, 
        title: { 
         text: 'Temp' 
        } 
       }, 
       legend: { 
        layout: 'vertical', 
        backgroundColor: '#FFFFFF', 
        align: 'left', 
        verticalAlign: 'top', 
        x: 400, 
        y: 0, 
        floating: true, 
        shadow: true 
       }, 
       tooltip: { 
        formatter: function() { 
         return '' + 
          this.x + ': ' + this.y + ' ºC'; 
        } 
       }, 
       plotOptions: { 
        column: { 
         pointPadding: 0.2, 
         borderWidth: 0 
        } 
       }, 
       series: 

       [<%= GraphSeries %>], 
      }); 

Я попытался создать его с помощью другого сообщения, однако ему не удалось создать диаграмму. Основная проблема заключается в том, что линейный граф имеет две серии, поэтому метод ниже будет устанавливать цвет для обеих серий, я предполагаю? Так, может, мне, наверное, понадобится отформатировать серию в моем коде VB?

series: [{ 
    color: 'yellow', 
    data: [ 
     [<%= GraphSeries %>] 
    ]}, 

Edit:

$(document).ready(function() { 
      chart = new Highcharts.Chart({ 
      colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'] 

       chart: { 
        renderTo: 'container', 
        defaultSeriesType: 'column' 
       } 

Answer 1

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

See here.

Вот рабочая часть из моего проекта

var chart; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart:{ 
      renderTo:'perfchart', 
      type:'line', 
      marginRight:130, 
      marginBottom:25 
     }, 
     colors: ['#0000FF', '#0066FF', '#00CCFF'], 
     title:{ 
      text:'Historical system performance', 
      x:-20 //center 
     }, 

Внешний вид:

Answer 2

Смотрите код (и сюжет, который он визуализирует) ниже.

Ниже приведен фрагмент сценария, то есть либо поместите его в свою разметку между двумя тегами сценария, либо в виде файла js-стоп-файла с включенными в свою разметку.

Colors является объект Chart, поэтому самый простой способ передать массив цветов (в виде шестнадцатеричных строк):

$(function() { 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'line' 
      }, 
      colors: ['#562F1E', '#AF7F24', '#263249', '#5F7F90', '#D9CDB6'], 
      title: { 
       text: false 
      }, 
      yAxis: { 
       title: { 
        text: false 
       } 
      }, 
      series: [{ 
       name: 'series I', 
       data: [17.4, 16.1, 19.45, 24.15, 28.44, 33.15, 37.2, 41.25, 43.3] 
      }, 
      { 
       name: 'series II', 
       data: [13.19, 17.23, 25.74, 28.5, 33.9, 35.62, 37.0, 36.6, 34.82] 
      } 
      ] 
     }); 
    }); 
}) 

Answer 3

Цвет может быть сконфигурирован как часть серии. Попробуйте что-то вроде этого:

series: [ 
    { 
     name: 'series I', 
     color: '#ffffff', 
     data: [17.4, 16.1, 19.45, 24.15, 28.44, 33.15, 37.2, 41.25, 43.3] 
    } 
];