1
ハイチャートグラフをHTMLテーブルにリンクしようとしていますが、2つのリンクを正しく表示できますが、ドキュメントを見つけることができません。 散布図の複数のシリーズを定義する方法の例はです。私が見つけることができるものはすべて、ばらばらに翻訳されない棒グラフまたは折れ線グラフです。ハイチャート - HTMLテーブルから複数のシリーズを含む散布図を作成する方法
私はswitchRowsAndColumns:trueを使用しようとしましたが、グラフがエラーになります。私は複数の列を使ってシリーズを追加しようとしましたが、途中で動作しますが、x値を定義することはできません（行xをx、値yを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>
これは私がやりたい正確に何を行います！しかし、1つのフォローアップの質問。最終的に私は6-7シリーズのようなものを持っています。私はもっと追加しようとしましたが、私はそれを正しくやっているのか分かりません。何かヒント？ – Silversunset
'options'引数は、チャートコンストラクタに定期的に渡されるJSONオブジェクトです（オプションを使用してチャートを初期化するときに、CSV経由ではなく）。そのコンポーネントをブラウズして、条件文を作成し、好きなように並べ替えることができます。 –