Добавить различные символы в диаграмму высоких диаграмм с динамическими данными

Question

Итак, у меня есть диаграмма highchats, которая динамически получает данные из базы данных MySQL.

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

Мой HTML:

<div id="container"></div> 
<br /> 
<table border="0" cellpadding="0" cellspacing="0" id="sheet6" class="sheet6 gridlines"> 
     <col class="col0"> 
     <col class="col1"> 
     <col class="col2"> 
     <col class="col3"> 
     <tbody> 
      <tr class="row0"> 
      <td class="column0 style119 s">Month</td> 
      <td class="column1 style117 f">Manual</td> 
      <td class="column2 style117 f">Automated</td> 
      <td class="column3 style117 f">Profit/Loss</td> 
      </tr> 
      <tr class="row1"> 
      <td class="column0 style0 n">0</td> 
      <td class="column1 style118 f">0</td> 
      <td class="column2 style118 f">0</td> 
      <td class="column3 style118 f">0</td> 
      </tr> 
      <tr class="row2"> 
      <td class="column0 style0 n">1</td> 
      <td class="column1 style118 f">119</td> 
      <td class="column2 style118 f">551</td> 
      <td class="column3 style118 f">-432</td> 
      </tr> 
      <tr class="row3"> 
      <td class="column0 style0 n">2</td> 
      <td class="column1 style118 f">238</td> 
      <td class="column2 style118 f">717</td> 
      <td class="column3 style118 f">-479</td> 
      </tr> 
      <tr class="row4"> 
      <td class="column0 style0 n">3</td> 
      <td class="column1 style118 f">357</td> 
      <td class="column2 style118 f">860</td> 
      <td class="column3 style118 f">-504</td> 
      </tr> 
      <tr class="row5"> 
      <td class="column0 style0 n">4</td> 
      <td class="column1 style118 f">476</td> 
      <td class="column2 style118 f">980</td> 
      <td class="column3 style118 f">-504</td> 
      </tr> 
      <tr class="row6"> 
      <td class="column0 style0 n">5</td> 
      <td class="column1 style118 f">595</td> 
      <td class="column2 style118 f">991</td> 
      <td class="column3 style118 f">-396</td> 
      </tr> 
      <tr class="row7"> 
      <td class="column0 style0 n">6</td> 
      <td class="column1 style118 f">713</td> 
      <td class="column2 style118 f">1002</td> 
      <td class="column3 style118 f">-288</td> 
      </tr> 
      <tr class="row8"> 
      <td class="column0 style0 n">7</td> 
      <td class="column1 style118 f">832</td> 
      <td class="column2 style118 f">1012</td> 
      <td class="column3 style118 f">-180</td> 
      </tr> 
      <tr class="row9"> 
      <td class="column0 style0 n">8</td> 
      <td class="column1 style118 f">951</td> 
      <td class="column2 style118 f">1023</td> 
      <td class="column3 style118 f">-72</td> 
      </tr> 
      <tr class="row10"> 
      <td class="column0 style0 n">9</td> 
      <td class="column1 style118 f">1070</td> 
      <td class="column2 style118 f">1034</td> 
      <td class="column3 style118 f">37</td> 
      </tr> 
      <tr class="row11"> 
      <td class="column0 style0 n">10</td> 
      <td class="column1 style118 f">1189</td> 
      <td class="column2 style118 f">1044</td> 
      <td class="column3 style118 f">145</td> 
      </tr> 
      <tr class="row12"> 
      <td class="column0 style0 n">11</td> 
      <td class="column1 style118 f">1308</td> 
      <td class="column2 style118 f">1055</td> 
      <td class="column3 style118 f">253</td> 
      </tr> 
      <tr class="row13"> 
      <td class="column0 style0 n">12</td> 
      <td class="column1 style118 f">1427</td> 
      <td class="column2 style118 f">1066</td> 
      <td class="column3 style118 f">361</td> 
      </tr> 
      <tr class="row14"> 
      <td class="column0 style0 n">13</td> 
      <td class="column1 style118 f">1546</td> 
      <td class="column2 style118 f">1077</td> 
      <td class="column3 style118 f">469</td> 
      </tr> 
      <tr class="row15"> 
      <td class="column0 style0 n">14</td> 
      <td class="column1 style118 f">1665</td> 
      <td class="column2 style118 f">1087</td> 
      <td class="column3 style118 f">578</td> 
      </tr> 
      <tr class="row16"> 
      <td class="column0 style0 n">15</td> 
      <td class="column1 style118 f">1784</td> 
      <td class="column2 style118 f">1098</td> 
      <td class="column3 style118 f">686</td> 
      </tr> 
      <tr class="row17"> 
      <td class="column0 style0 n">16</td> 
      <td class="column1 style118 f">1903</td> 
      <td class="column2 style118 f">1109</td> 
      <td class="column3 style118 f">794</td> 
      </tr> 
      <tr class="row18"> 
      <td class="column0 style0 n">17</td> 
      <td class="column1 style118 f">2022</td> 
      <td class="column2 style118 f">1119</td> 
      <td class="column3 style118 f">902</td> 
      </tr> 
      <tr class="row19"> 
      <td class="column0 style0 n">18</td> 
      <td class="column1 style118 f">2140</td> 
      <td class="column2 style118 f">1130</td> 
      <td class="column3 style118 f">1010</td> 
      </tr> 
      <tr class="row20"> 
      <td class="column0 style0 n">19</td> 
      <td class="column1 style118 f">2259</td> 
      <td class="column2 style118 f">1141</td> 
      <td class="column3 style118 f">1119</td> 
      </tr> 
      <tr class="row21"> 
      <td class="column0 style0 n">20</td> 
      <td class="column1 style118 f">2378</td> 
      <td class="column2 style118 f">1152</td> 
      <td class="column3 style118 f">1227</td> 
      </tr> 
<tr><td></td></tr>  </tbody> 
    </table> 

Мои JS:

Highcharts.setOptions({ 
     lang: { 
      thousandsSep: ',' 
     } 
    }); 


     var chart = new Highcharts.Chart({ 
      colors: ["#cc1c0d", "#1d63af" , "#9eb215"], 
      chart: { 
       type: 'line', 
       backgroundColor:'rgba(255, 255, 255, 0.85)', 
       renderTo: 'container' 
      }, 
     data: { 
      table: 'sheet6', 
      complete: function(options){ 
       var series = options.series[1], 
       point = series.data[8]; 

       series.data[8] = { 
        x: point[0], 
        y: point[1], 
        marker: { 
         fillColor: '#1d63af', 
         symbol: 'circle', 
         radius: 4 
        } 
       }; 
      } 
      }, 
      title: { 
       text: 'Cost Comparison: Manual vs. Automated Testing' 
      }, 
      xAxis: { 
       tickInterval:3, 
       title: { 
        text: 'Months' 
       }, 
      plotLines: [{ 
      color: '#d9d9d6', 
      dashStyle: 'line', 
      value: 0, 
      width: 1 
      }, 
      { 
      color: '#d9d9d6', 
      dashStyle: 'line', 
      value: 12, 
      width: 1 
      }, 
      { 
      color: '#d9d9d6', 
      dashStyle: 'line', 
      value: 24, 
      width: 1 
      }, 
      { 
      color: '#d9d9d6', 
      dashStyle: 'line', 
      value: 36, 
      width: 1 
      }, 
      { 
      color: '#d9d9d6', 
      dashStyle: 'line', 
      value: 48, 
      width: 1 
      }], 
      }, 
      plotOptions: { 
       series: { 
        marker: { 
         symbol: 'circle', 
         radius: 3, 
         fillColor: '#FFFFFF', 
         lineWidth: 2, 
         lineColor: null // inherit from series 
        }, 
        shadow: true 
       } 
      }, 
      yAxis: { 
       allowDecimals: false, 
       title: { 
        text: 'Cost [kUSD]' 
       }, 
      labels: { 
       formatter: function() { 
        return Highcharts.numberFormat(this.value,0); 
       } 
      } 
      }, 
      credits: { 
       enabled: false 
      }, 
      tooltip: { 
       headerFormat: '<b>{series.name}</b><br>', 
       pointFormat: 'Month {point.x}: {point.y} kUSD' 
      }, 
     }); 

Вы можете увидеть пример этого все действия по следующему fiddle

Я бы очень признателен за любые указатели в правильное направление.

Answer 1

Ваш график имеет только один символ, потому что вы определили

plotOptions: { 
    series: { 
    marker: { 
     symbol: 'circle', 
     [...] 

, который устанавливает символ в "круг" для всех серий.

Если вы удалите эту строку, то Highcharts выдаст каждой серии свой собственный символ (см. http://api.highcharts.com/highcharts#series.marker.symbol). Он будет проходить через предопределенные значения по умолчанию, которые представляют собой «круг», «квадрат», «алмаз», «треугольник» и «треугольник вниз».

Если вы хотите, чтобы настроить заказ вы можете предоставить его

Highcharts.setOptions({symbols:["triangle","square","diamond","circle"]}); 

Answer 2

Highcharts предоставляет свойство symbolName в пределах своего графического объекта, который является свойством самого объекта объекта. Формы, которые он использует, являются:

1. "круг" ●

2. "бриллиант" ♦

3. "квадрат" ■

4. "треугольник" ▲

5. «triangle-down» ▼

По умолчанию, высокие диаграммы чередуют эти разные символы в каждой серии, но, как вы определили symbol: 'circle', на своих вариантах сюжета, вся серия s имеют один и тот же символ.

plotOptions: { 
    series: { 
    marker: { 
     symbol: 'circle', 
     [...] 

Чтобы решить ее удалить symbol: 'circle'

Demo