简体   繁体   中英

Add different symbols to highcharts chart with dynamic data

So I have a highchats chart that is getting it's data dynamically from a MySQL database.

I would like each series to have a different symbol but no matter what I try it is not working, my main issue is that I am unsure where in my example I need to define the different kinds of symbols.

My 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>

My 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'
          },
        });

You can see an example of this all in action under the following fiddle

I would really appreciate any pointers in the right direction.

Your chart has only one symbol because you defined

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

which sets the symbol to "circle" for all series.

If you remove that line then Highcharts will give each series it's own symbol (see http://api.highcharts.com/highcharts#series.marker.symbol ). It will iterate through the predefined defaults which are "circle", "square", "diamond", "triangle" and "triangle-down".

If you want to customize the order you can provide it via a call to

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

Highcharts exposes a symbolName property within its graphic object which is a property itself on the point object itself. The shapes it uses are:

1."circle" ●

2."diamond" ♦

3."square" ■

4."triangle" ▲

5."triangle-down" ▼

By default, highcharts alternate these different symbols on each serie, but, As you have defined symbol: 'circle', on your plot options, all series have the same symbol.

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

To solve it remove symbol: 'circle'

Demo

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM