0
私は、列と折れ線グラフを1つの結合チャートにプロットしようとしています。私はテーブルから値を読み取り、シリーズに渡す必要があります。私はそれらを配列に読み込んでそれをデータ属性（配列val3とval4）に渡しましたが、それは動作しません。私はテーブル（配列val2とfirst_array_work）からではないデータを持つ配列を生成すると、動作します。シリーズデータへの配列の受け渡しが正常に行われない
以下はJSFiddle https://jsfiddle.net/AnilKumarVallur/13x2uj7a/1/であり、完全なコードがここに添付されています。
`<html>
<head>
<title>Highcharts Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var cat_array = [];
var first_array_work = [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
var val2 = [];
for(var i=0;i<5;i++){
val2[i] = 10*i;
}
var first_array = [];
var header_cat = 1;
$("#datatable tr").eq(0).find('td').each(function(){
if(header_cat){
header_cat = 0;
}
else{
cat_array.push($(this).text());
}
})
var header_first = 1;
var i=0;
var val3 = [];
$("#datatable tr").eq(1).find('td').each(function(){
if(header_first){
header_first = 0;
}
else{
//first_array.push($(this).text());
val3[i] = ($(this).text());
//alert(val3[i]);
i++;
}
})
var cat = cat_array;
var val4 = [];
for(var m=0;m<val3.length;m++){
val4[m] = val3[m];
}
var chart = {
zoomType: 'xy'
};
var subtitle = {
text: 'Source: WorldClimate.com'
};
var title = {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
};
var xAxis = {
categories: cat,
crosshair: true
};
var yAxis= [{ // Primary yAxis
labels: {
format: '{value}\xB0C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}];
var tooltip = {
shared: true
};
var legend = {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
};
var series= [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: val2,
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '\xB0C'
}
}
];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#container').highcharts(json);
});
</script>
<table id='datatable'>
<tr><td>Amb Temp</td><td>-40</td><td>-30</td><td>-20</td><td>-10</td><td>0</td><td>10</td><td>-40</td><td>-30</td><td>-20</td><td>-10</td><td>0</td><td>10</td></tr>
<tr><td>Active</td><td>10.0</td><td>20</td><td>10</td><td>20</td><td>10</td><td>20</td><td>10</td></tr>
<tr><td>Sleep</td><td>20</td><td>30</td><td>10</td><td>20</td><td>10</td><td>20</td><td>10</td><td>20</td><td>10</td><td>20</td><td>10</td><td>20</td></tr>
</table>
</body>
</html>`