このコードのどこでエラーを起こしているのかわかりません。
私がする必要があるのは、データベースからの値を使用して HighCharts を描画することです。値はいつでも変更される可能性があります。
- x 軸には、最後のポイントとして「11 月 30 日」のようにラベルを付け、最初のポイントとして「10 月 30 日」、つまり 30 日を意味する必要があります (チャートを 30 日のみ表示したい)。これは一例です。日付は時間によって異なる場合があります。- JS は ajax 経由でリクエストを送信し、結果は json 形式で返されます。これは行の 1 つです:{"time":"2012-08-07 21:15:05","value_1":"1.241110","value_2":"1.241103"}
グラフには 2 つの線 ( value_1 と value_2 ) があり、すべて x 軸の同じ Time に対応しています。
日付の形式を UTC に変換する必要があることをどこかで読みました。これが機能です
function get_and_display_data(symbol_1,price_1,period_1,bars_1,constraints_1){
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
var options = {
chart: {
renderTo: 'graph',
type: 'line',
marginRight: 130,
marginBottom: 25,
reflow: false,
borderWidth: 0
},
title: {
text: 'Data',
x: -20 //center
},
xAxis: {
type:'datetime',
dateTimeLabelFormats: {
year: '%b \'%y'
}
},
yAxis: {
title: {
text: 'This is a text !'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat ('%A, %b %e, %Y', this.point.x) +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
series: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 3
}
}
}
}
},
series: [{
name: ''
}, {
name: ''
}]
}
$.ajax({
url: url_base+"show_page/graph_data.do",
type: 'POST',
data: 'symbol='+symbol_1+"&price="+price_1+"&period="+period_1+"&bars="+bars_1+"&constraints="+constraints_1,
cache: false,
dataType: "json",
success: function(html) {
var data_array = [];
var data_1 = [];
var data_2 = [];
var i = 0;
var time_x_axis = [];
var sLegend = [];
try{
data_array = html;
sLegend = price_1.split(',');
if(html == null){
alert('No data was found. Try it again ');
}else{
for(i=0;i<data_array.length;i++)
{
time_x_axis[i] = data_array[i]['time'];
data_1[i] = '['+Date.UTC(time_x_axis[i].substr(0, 4), time_x_axis[i].substr(5,2), time_x_axis[i].substr(8,2), time_x_axis[i].substr(11,2), time_x_axis[i].substr(14,2), time_x_axis[i].substr(17,2))+','+parseFloat(data_array[i]['value_1'])+']';
data_2[i] = '['+Date.UTC(time_x_axis[i].substr(0, 4), time_x_axis[i].substr(5,2), time_x_axis[i].substr(8,2), time_x_axis[i].substr(11,2), time_x_axis[i].substr(14,2), time_x_axis[i].substr(17,2))+','+parseFloat(data_array[i]['value_2'])+']';
}
}
}catch(e){ }
options.series[0].data = '['+data_1+']';
options.series[0].name = sLegend[1];
options.series[1].data = data_2;
options.series[1].name = sLegend[2];
chart = new Highcharts.Chart(options);
}
});}
ここでは、結果を html 変数で取得し、それらを Data_array[] に影響を与えます。シリーズデータはData:[[],[],[]..[]]の形式である必要があるため、 *options.series[0].data = '['+data_1+']'; を配置するのはそのためです。 * .
*data_1[i]* については、年、月、日、時、分、および秒を取得するために時間を部分文字列にする必要があります。
コード内で何が欠けていますか?