我正在尝试将highcharts图表与HTML表格链接，看起来我可以将两者链接得很好但是我无法找到有关如何为散点图定义多个系列的任何文档或示例 - 我能找到的所有东西都是条形图或折线图，不能很好地分散。
我已尝试使用switchRowsAndColumns:true，但这会导致图表出错。我甚至尝试使用多个列来添加系列，这是中途工作但不允许我定义x值（它将行＃作为x而值i作为y输入），也不允许我定义附加系列的其余字段（名称，用户，日期等）。
有什么建议吗？
Highcharts.setOptions({
lang: {
thousandsSep: "",
}
});
Highcharts.chart('container', {
data: {
table: 'datatable',
firstRowAsNames: false,
startRow: 1,
seriesMapping: [{
Type: 0,
x: 1,
y: 2,
name: 3,
Owner: 4,
Notes: 5,
DAdd: 6,
Pic: 7,
}],
},
series: [{
name: 'First Series'
}, {
name: 'Second Series'
}],
chart: {
type: 'scatter',
plotBorderWidth: 1,
zoomType: 'xy',
marginLeft: 200,
},
legend: {
enabled: true,
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
floating: true,
y: 40,
x: -20,
footer: {
text: 'Click and drag to select an area to zoom'
},
title: {
text: 'Categories',
style: {
fontStyle: 'italic'
}
},
},
xAxis: {
gridLineWidth: 1,
max: 4500,
min: -4500,
tickInterval: 1000,
title: {
text: ''
},
labels: {
format: '{value}'
},
plotLines: [{
color: 'gray',
dashStyle: 'dot',
width: 2,
tickAmount: 5,
value: 0,
label: {
rotation: 0,
y: 0,
style: {
fontStyle: 'italic'
},
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
reversed: true,
tickInterval: 1000,
max: 4500,
min: -4500,
title: {
text: ''
},
labels: {
format: '{value}'
},
maxPadding: 0.2,
plotLines: [{
color: 'gray',
dashStyle: 'dot',
tickAmount: 5,
width: 2,
value: 0,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
x: 0
},
zIndex: 3
}]
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}',
},
stickyTracking: false,
},
tooltip: {
snap: 0
}
},
tooltip: {
useHTML: true,
headerFormat: '<table class="chartinfo">',
pointFormat: '<tr><th colspan="2"><h3>{point.name}</h3></th></tr>' +
'<tr><th>Coordinates:</th><td>{point.x},{point.y}</td></tr>' +
'<tr><th>Owner:</th><td>{point.Owner}</td></tr>' +
'<tr><th>Type:</th><td>{point.Type}</td></tr>' +
'<tr><th>Notes:</th><td>{point.Notes}</td></tr>' +
'<tr><th>Date Added:</th><td>{point.DAdd}</td></tr>' +
'<tr><th colspan=2><img src="{point.Pic}" style="width:200px;height:100px;" align="center"</th></tr>',
footerFormat: '</table>',
followPointer: false,
hideDelay: 30,
},
});#container {
height: 700px;
width: 800px;
text-align: left;
margin: 20 20 20 20;
z-index: 20;
}
#datatable {
border-collapse: collapse;
font-size: 0.8em;
}
td, th {border: 1px solid black;}<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<table id="datatable">
<thead>
<tr>
<th></th>
<th>x</th>
<th>y</th>
<th>Name</th>
<th>Owner</th>
<th>Notes</th>
<th>Date Added</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<th>Series 1</th>
<td>1000</td>
<td>1000</td>
<td>Object 1</td>
<td>Username1</td>
<td>Misc Notes</td>
<td>2017.10.01</td>
<td>https://i.imgur.com/LhTKfSj.png</td>
</tr>
<tr>
<th>Series 1</th>
<td>-1000</td>
<td>1000</td>
<td>Object 2</td>
<td>Username2</td>
<td>Misc Notes</td>
<td>2017.10.01</td>
<td>https://i.imgur.com/LhTKfSj.png</td>
</tr>
<tr>
<th>Series 2</th>
<td>-1000</td>
<td>-1000</td>
<td>Object 3</td>
<td>Username3</td>
<td>Misc Notes</td>
<td>2017.10.01</td>
<td>https://i.imgur.com/LhTKfSj.png</td>
</tr>
<tr>
<th>Series 2</th>
<td>1000</td>
<td>-1000</td>
<td>Object 4</td>
<td>Username4</td>
<td>Misc Notes</td>
<td>2017.10.01</td>
<td>https://i.imgur.com/LhTKfSj.png</td>
</tr>
</tbody>
</table>
答案 0 :(得分：0)
您可以使用complete回调函数（http://api.highcharts.com/highcharts/data.complete）在将图表选项传递给图表构造函数之前修改图表选项。
在您的示例中可以看起来类似于：
complete: function(options) {
// create the second series
options.series.push({
data: []
});
// move the data to the second series
var d0 = options.series[0].data,
d1 = options.series[1].data;
d1.push(d0.pop(), d0.pop());
}