带有表中数据的图表，如何为特定系列中的特定值添加自定义标记
Highcharts with data from table, how to add custom marker for specific value from specific series?
我有一个高图表折线图，数据源是HTML表格。
我想为特定系列上的特定标记添加一个自定义标记，以指示盈亏平衡点。
我的高图表 js：
$(function () {
var chart = new Highcharts.Chart({
colors: ["#cc1c0d", "#1d63af" , "#9eb215"],
chart: {
type: 'line',
backgroundColor:'rgba(255, 255, 255, 0.85)',
renderTo: 'container'
},
data: {
table: 'sheet6'
},
title: {
text: 'Cost Comparison'
},
xAxis: {
tickInterval:3,
title: {
text: 'M'
},
},
plotOptions: {
series: {
marker: {
symbol: 'circle',
radius: 3,
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null // inherit from series
},
shadow: true
}
},
yAxis: {
allowDecimals: false,
title: {
text: 'Cost'
},
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'
},
});
});
以下是表中数据的示例：
<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">M</td>
<td class="column1 style117 f">M</td>
<td class="column2 style117 f">A</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 js中。但我的数据来自一个表格。
更新 1：
我创建了一个小提琴：https://jsfiddle.net/partisanentity/n5gaf26o/
如果您查看蓝色系列（自动），它在第 8 个月开始与红色系列（手动）相交。我想在第 8 个月为蓝色系列添加一个自定义标记。
盈亏平衡（交叉点）的指示不会来自表格。它将来自我使用 PHP 的代码的不同部分。
我只需要知道在我的示例中需要添加它以及如何添加它？
在
图表选项中的数据完整函数中解析数据并设置标记设置应该可以解决此问题。
可以为每个点设置标记选项，例如，当点作为对象给出时 - 例如：jsfiddle.net/25ed2gb3
相关文章：
- 高图表 - 是否可以为每个系列添加工具提示格式化程序
- Highcharts条形图如何添加系列事件
- 将新的系列[0]数据添加到现有的高位图表中
- highcharts-点击后将系列添加到图表中
- 如何使用jvectormap添加带有系列的标记
- 带有表中数据的图表，如何为特定系列中的特定值添加自定义标记
- 高图表添加新系列不起作用
- 如何将自定义工具提示添加到 jqxwidget 部分饼图系列
- 高图表:动态添加数据系列，并在yAxis上动态添加类别
- 高图表 - 将系列名称添加为 X 轴标签
- 将自定义链接添加到饼图中的系列/数据部分(高图表.js）
- 将另一个系列添加到行高图表
- 为某些特定类别的新系列添加点
- 将新系列添加到类别高点
- HighCharts.正在将id为的系列添加到yAxis
- 需要帮助使用SharePoint列表和PSServices将其他系列添加到Highcharts图中
- 仅将特定系列添加到Shield UI图表图例中
- 高图:向倒排柱范围图系列添加符号
- 为不同的系列添加不同格式的工具提示
- 3D Highchart动态系列添加问题
