So I have a highchats chart that is getting it's data dynamically from a MySQL database.
我有一个highchats图表它从MySQL数据库中动态获取数据。
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:
我的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:
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.
我非常感谢任何指向正确方向的指示。
2 个解决方案
#1
3
Your chart has only one symbol because you defined
您的图表只有一个符号，因为您定义了
plotOptions: {
series: {
marker: {
symbol: 'circle',
[...]
which sets the symbol to "circle" for all series.
将所有系列的符号设置为“circle”。
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".
如果删除这一行，那么Highcharts会为每个系列提供自己的符号(参见http://api.highcharts.com/highcharts#series.marker.symbol)。它将遍历预定义的默认值，即“circle”、“square”、“diamond”、“triangle”和“triangle-down”。
If you want to customize the order you can provide it via a call to
如果您想定制订单，可以通过调用
Highcharts.setOptions({symbols:["triangle","square","diamond","circle"]});
#2
1
Highcharts exposes a symbolName property within its graphic object which is a property itself on the point object itself. The shapes it uses are:
Highcharts在它的图形对象中公开了一个symbolName属性，这是点对象本身的属性。它使用的形状是:
1."circle" ●
1。●“圆”
2."diamond" ♦
2。“钻石”♦
3."square" ■
3所示。■“广场”
4."triangle" ▲
4所示。▲“三角形”
5."triangle-down" ▼
5。“三角形”▼
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.
在默认情况下，highcharts会在每个联赛中替换这些不同的符号，但是，正如你定义的“圆圈”一样，在你的情节选项中，所有的系列都有相同的符号。
plotOptions: {
series: {
marker: {
symbol: 'circle',
[...]
To solve it remove symbol: 'circle'
要解决这个问题，请删除符号:“circle”
演示
#1
3
Your chart has only one symbol because you defined
您的图表只有一个符号，因为您定义了
plotOptions: {
series: {
marker: {
symbol: 'circle',
[...]
which sets the symbol to "circle" for all series.
将所有系列的符号设置为“circle”。
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".
如果删除这一行，那么Highcharts会为每个系列提供自己的符号(参见http://api.highcharts.com/highcharts#series.marker.symbol)。它将遍历预定义的默认值，即“circle”、“square”、“diamond”、“triangle”和“triangle-down”。
If you want to customize the order you can provide it via a call to
如果您想定制订单，可以通过调用
Highcharts.setOptions({symbols:["triangle","square","diamond","circle"]});
#2
1
Highcharts exposes a symbolName property within its graphic object which is a property itself on the point object itself. The shapes it uses are:
Highcharts在它的图形对象中公开了一个symbolName属性，这是点对象本身的属性。它使用的形状是:
1."circle" ●
1。●“圆”
2."diamond" ♦
2。“钻石”♦
3."square" ■
3所示。■“广场”
4."triangle" ▲
4所示。▲“三角形”
5."triangle-down" ▼
5。“三角形”▼
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.
在默认情况下，highcharts会在每个联赛中替换这些不同的符号，但是，正如你定义的“圆圈”一样，在你的情节选项中，所有的系列都有相同的符号。
plotOptions: {
series: {
marker: {
symbol: 'circle',
[...]
To solve it remove symbol: 'circle'
要解决这个问题，请删除符号:“circle”
演示