我有9个图表，每个图表在一个页面上生成一个容器。我想要做的是使用一个图表来选择样本并突出显示它们，将它们列在表格中，同时将它们显示在其他8个图表中。我有可以让表格生成的部分，但我不能让系列显示在图表中。这是我到目前为止所做的：
<!DOCTYPE html>
<head>
<title>HighCharts Data Output</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script>
$(function () {
var $report = $('#report'),
selectedPoints = [];
$('#container1').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy',
plotBorderColor: 'black',
plotBorderWidth: 1,
},
tooltip: {
formatter: function() {
return this.series.name + '<br><b>X: </b>'+ Highcharts.numberFormat(this.x, '1',',') +'<b> Y:</b>'+ Highcharts.numberFormat(this.y, '1',',') +'<br><span style="color: ' + this.series.color + '; font-weight:bold;">' + this.point.samp +'</span>';
},
},
subtitle: {
text: 'Data Analysis'
},
title: {
text: 'DataX vs DataY'
},
xAxis: {
minorGridLineColor: '#F0F0F0',
minorTickInterval: 'auto',
min: 0.05,
max: 900,
title: {
enabled: true,
text: 'XData'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
min: 0.05,
max: 900,
title: {
text: 'YData)'
}
},
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
select: function (event) {
var chart = this.series.chart;
var selectedPointsStr = "";
if (event.accumulate) {
selectedPoints.push(this);
} else {
selectedPoints = [this];
}
// when is the chart object updated? after this function finshes?
$.each(selectedPoints, function (i, value) {
selectedPointsStr += "<tr><td>" + value.x + "</td><td> " + value.y + "</td></tr><br>";
//var Plot = eval(selectedPointsStr);
});
$report.html(selectedPointsStr);
}
}
}
}
},
series: [{
type: 'line',
name: '1:1 Line',
data: [[0, 0], [1000, 1000]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
},
{name: 'group1',
data: [{x:115.9,y:179,samp:'CR13-451D_384.5-386'},{x:37.5,y:188,samp:'CR13-389D_292-293.5'}]
},
{name: 'group2',
data: [{x:27.8,y:64,samp:'CR12-361D_226.5-228'},{x:51.9,y:228,samp:'CR12-369D_428-429.5'}]
},
{name: 'group3',
data: [{x:27.2,y:863,samp:'CR12-346D_973.5-975'},{x:478.8,y:575,samp:'CR12-348D_1100-1101.5'},{x:39.1,y:598,samp:'CR12-360D_1167.5-1169'}]
},
{name: 'group4',
data: [{x:22.8,y:244,samp:'CR11-149D_333-334.5'},{x:25.3,y:224,samp:'CR11-149D_346.5-348'},{x:34.4,y:128,samp:'CR11-196D_130.5-132'},{x:198.4,y:31,samp:'CR11-197D_271.5-273'},{x:0.9,y:14,samp:'CR11-204D_127.5-129'},{x:9.1,y:223,samp:'CR11-224D_207-208.5'},{x:0.05,y:288,samp:'CR11-224D_64.5-66'},{x:0.05,y:120,samp:'CR11-228D_14-15.5'},{x:5.6,y:181,samp:'CR11-231D_93-94.5'},{x:95.6,y:0.05,samp:'CR11-246D_90-91.5'},{x:0.05,y:176,samp:'CR11-256D_130.5-132'},{x:13.1,y:133,samp:'CR11-258D_321-322.5'},{x:0.05,y:246,samp:'CR11-260D_90-91.5'},{x:340.9,y:185,samp:'CR11-266D_304.5-306'},{x:0.05,y:143,samp:'CR11-267D_12.5-14'},{x:33.1,y:239,samp:'CR11-267D_135.5-137'},{x:0.05,y:213,samp:'CR11-267D_314-315.5'},{x:180.9,y:23,samp:'CR11-270D_396.5-398'},{x:114.4,y:169,samp:'CR11-272D_301.5-303'},{x:235.9,y:12,samp:'CR11-272D_318-319.5'},{x:118.1,y:103,samp:'CR11-272D_361.5-363'},{x:22.8,y:144,samp:'CR11-274D_285-286.5'},{x:48.8,y:109,samp:'CR11-275D_209-210.5'},{x:28.4,y:185,samp:'CR11-275D_231.5-233'},{x:129.1,y:5,samp:'CR11-275D_365-366.5'},{x:18.8,y:234,samp:'CR11-277D_33-34.5'},{x:0.05,y:165,samp:'CR11-280D_145.5-147'},{x:0.05,y:261,samp:'CR11-280D_15-16.5'},{x:24.1,y:174,samp:'CR11-280D_337.5-339'},{x:15.6,y:66,samp:'CR11-280D_420-421.5'},{x:0.05,y:174,samp:'CR11-284D_217.5-219'},{x:12.2,y:441,samp:'CR11-289D_39.5-41'},{x:107.8,y:240,samp:'CR11-291D_279.5-281'},{x:0.05,y:143,samp:'CR11-297D_118.5-120'},{x:23.8,y:160,samp:'CR11-301D_127.5-129'},{x:0.05,y:321,samp:'CR11-302D_313.5-315'},{x:26.6,y:225,samp:'CR11-309D_135-136.5'},{x:0.05,y:190,samp:'CR11-313D_42-43.5'},{x:48.8,y:180,samp:'CR11-313D_456-457.5'},{x:9.7,y:208,samp:'CR11-318D_73-74.5'},{x:0.6,y:13,samp:'CR11-323D_57-58.5'},{x:12.5,y:174,samp:'CR11-324D_181-182.5'},{x:0.05,y:153,samp:'CR11-324D_244-245.5'},{x:70.3,y:128,samp:'CR11-326D_369.5-371'},{x:4.4,y:181,samp:'CR11-328D_163.5-165'},{x:0.05,y:121,samp:'CR12-340D_476-477.5'},{x:26.6,y:149,samp:'CR12-341D_133.5-135'},{x:5.3,y:194,samp:'CR12-341D_147-148.5'},{x:195,y:73,samp:'CR12-342D_609-610.5'},{x:0.05,y:226,samp:'CR12-342D_66-67.5'},{x:37.8,y:208,samp:'CR12-345D_489-490.5'},{x:50,y:150,samp:'CR12-345D_594-595.5'},{x:37.5,y:239,samp:'CR12-346D_100.5-102'},{x:0.05,y:219,samp:'CR12-346D_21-22.5'},{x:40.6,y:259,samp:'CR12-346D_312-313.5'},{x:22.2,y:208,samp:'CR12-347D_157.5-159'},{x:0.05,y:478,samp:'CR12-348D_11-12.5'},{x:30.9,y:294,samp:'CR12-348D_156.5-158'},{x:42.5,y:238,samp:'CR12-349D_438-439.5'},{x:5.6,y:210,samp:'CR12-355D_529.5-531'},{x:28.1,y:221,samp:'CR12-355D_618-619.5'},{x:72.5,y:108,samp:'CR12-357D_427.5-429'},{x:35,y:258,samp:'CR12-366D_213-214.5'},{x:0.05,y:208,samp:'CR12-369D_36.5-38'},{x:10.3,y:163,samp:'CR12-372D_320-321.5'},{x:2.5,y:195,samp:'CR12-372D_47-48.5'},{x:22.8,y:175,samp:'CR12-374D_109.5-111'},{x:29.1,y:219,samp:'CR12-374D_174-175.5'},{x:42.5,y:203,samp:'CR12-374DB_372-373.5'},{x:30,y:175,samp:'CR12-375D_253.5-255'},{x:63.8,y:150,samp:'CR12-375D_304.5-306'},{x:18.8,y:165,samp:'CR13-377D_374-375.5'},{x:4.7,y:189,samp:'CR13-381D_55.5-57'},{x:72.2,y:163,samp:'CR13-386D_235.5-237'},{x:29.1,y:203,samp:'CR13-390D_159.5-161'},{x:12.2,y:204,samp:'CR13-393D_462-463.5'},{x:22.2,y:173,samp:'CR13-393D_481.5-483'},{x:23.8,y:179,samp:'CR13-394D_617-618.5'},{x:50.6,y:266,samp:'CR13-399D_189.5-191'},{x:7.8,y:245,samp:'CR13-409D_160.5-162'},{x:26.3,y:193,samp:'CR13-416D_506-507.5'},{x:42.5,y:176,samp:'CR13-422D_511.5-513'},{x:23.8,y:221,samp:'CR13-428D_510-511.5'},{x:88.8,y:259,samp:'CR13-432D_195.5-197'},{x:28.8,y:245,samp:'CR13-432D_236-237.5'},{x:7.2,y:158,samp:'CR13-433D_155-156.5'},{x:18.4,y:169,samp:'CR13-433D_228.5-230'},{x:43.8,y:229,samp:'CR13-433DB_303.5-305'},{x:1.9,y:159,samp:'CR13-433DB_488-489.5'},{x:27.2,y:233,samp:'CR13-435D_349.5-351'},{x:37.2,y:203,samp:'CR13-435D_429-430.5'},{x:26.6,y:223,samp:'CR13-438D_331.5-333'},{x:65.3,y:161,samp:'CR13-438D_573-574.5'},{x:365.9,y:79,samp:'CR13-440D_370.5-372'},{x:315.6,y:56,samp:'CR13-440D_382.5-384'},{x:11.9,y:183,samp:'CR13-444D_160.5-162'},{x:29.1,y:213,samp:'CR13-444D_202.5-204'},{x:2.5,y:214,samp:'CR13-447D_127.5-129'},{x:7.8,y:200,samp:'CR13-449D_272-273.5'},{x:17.2,y:266,samp:'CR13-449D_537.5-539'}]
},
{name: 'group5',
data: [{x:238.4,y:80,samp:'CR11-197D_418.5-420'},{x:0.9,y:12,samp:'CR11-226D_148.5-150'},{x:30.3,y:220,samp:'CR11-260D_121.5-123'},{x:45,y:309,samp:'CR11-260D_132-133.5'},{x:42.8,y:238,samp:'CR11-260D_183-184.5'},{x:6.3,y:499,samp:'CR11-282D_5-8'},{x:28.1,y:136,samp:'CR12-340D_279.5-281'},{x:0.05,y:134,samp:'CR12-343D_309-310.5'},{x:221.6,y:175,samp:'CR12-343D_316.5-318'},{x:24.4,y:203,samp:'CR12-347D_351-352.5'},{x:43.8,y:55,samp:'CR12-357D_543-544.5'},{x:29.7,y:259,samp:'CR13-389D_446.5-448'},{x:0.05,y:150,samp:'CR13-391D_116.5-118'},{x:0.05,y:208,samp:'CR13-391DB_115-116.5'},{x:40.6,y:249,samp:'CR13-394D_114.5-116'},{x:34.7,y:229,samp:'CR13-396D_247.5-249'},{x:23.1,y:186,samp:'CR13-414D_196.5-198'},{x:47.2,y:239,samp:'CR13-416D_392-393.5'},{x:81.6,y:54,samp:'CR13-428D_372-373.5'},{x:1.9,y:139,samp:'CR13-429D_583.5-585'},{x:18.4,y:235,samp:'CR13-432D_489.5-491'},{x:47.8,y:166,samp:'CR13-448D_230-231.5'},{x:14.4,y:201,samp:'CR13-451D_332-333.5'}]
},
{name: 'group6',
data: [{x:0.05,y:179,samp:'CR11-260D_112.5-114'},{x:0.05,y:585,samp:'CR11-267D_840.5-842'},{x:0.05,y:608,samp:'CR11-267D_852.5-854'},{x:68.4,y:560,samp:'CR11-300D_759.5-761'},{x:0.05,y:793,samp:'CR11-324D_917.5-919'},{x:39.1,y:525,samp:'CR12-346D_792-793.5'},{x:303.4,y:475,samp:'CR12-349D_865.5-867'},{x:135.9,y:550,samp:'CR12-352D_972-973.5'},{x:80.9,y:265,samp:'CR12-354D_1034-1035.5'}]
},
{name: 'group7',
data: [{x:3.4,y:299,samp:'CR11-294D_0-2'}]
},
{type: 'line',
name: '3:1 Line',
data: [[0, 0], [1000, 3000]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
}],
exporting: {
sourceWidth: 800,
sourceHeight: 400,
chartOptions: {
subtitle: null
}
}
});
$('#container2').highcharts({
chart: {
data: {
table: eval(document.getElementById('report'))
},
type: 'scatter',
zoomType: 'xy',
plotBorderColor: 'black',
plotBorderWidth: 1
},
tooltip: {
formatter: function() {
return this.series.name + '<br><b>X: </b>'+ Highcharts.numberFormat(this.y, '1',',') +'<b> Y: </b>'+ Highcharts.numberFormat(this.y, '1',',') +'<br><span style="color: ' + this.series.color + '; font-weight:bold;">' + this.point.samp +'</span>';
},
series: [{
name: 'new Series', //this is the new series I want to populate the other charts
data: (function() {table:
data.push(document.getElementById('report'))
return data;
})
}]
}
});
});
</script>
<body>
<table width="1200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div id="container1" style="height: 400px; min-width: 530px"></div></td>
<td> <table id="report"></table></td>
</tr>
<tr>
<td><div id="container2" style="height: 400px; min-width: 530px"></div></td>
<td><div id="container3" style="height: 400px; min-width: 530px"></div></td>
</tr>
</table>
</body>
</html>
我不确定我是否采取了正确的方法。最终结果将是其他8个图表相对于其他系列（静态数据）将是“动态的”，对于每个样本将是不同的X，Y对。因此，当我点击chart1时，其他点将根据样本ID显示在其他图表中。
我的数据如下： SampID Data1 Data2 Data3 Data4 Data5 Data6 Data7等
9个图表中的每一个都是这些数据的组合，但它们都是指sampID。因此，图表1是Data1与Data2，图表2可能是Data2与Data6，但它们都返回sampID，因为这些数据是行。
真正的挑战是尝试将图表1中所选样本的sampID与图2-9中相同名称的sampID相关联。
对此有何建议？