[英]Multiple series data Highcharts line
查詢結果我使用顯示3列(國家,日期,項目)。 我的PHP代碼方面
$res = db_query($sql);
$dat = array();
while($r = db_fetch_array($res)){
$dat[]= array($r['date'], $r['items'], $r['country']);
}
// Armar
$start_date = '';
if(count($dat)>0){
$s = split(' ',$dat[0][0]);
$ss = split('-',$s[0]);
}
// Cada objeto en $dats es una grafica
$dats[] = array('type'=>'line',
'name'=>$q['title'],
'pointInterval'=>24 * 3600 * 1000,
'pointStart'=>mktime(0,0,0,$ss[1],$ss[2],$ss[0])*1000,
'data'=>$dat) ;
//echo "$sql";
echo json_encode($dats,JSON_NUMERIC_CHECK);
我的Javascript代碼:
function loadLine(_data){
$('#line_container').highcharts({
chart: {zoomType: 'x',spacingRight: 20},
title: { text: 'Monthly Created items'},
subtitle: {text:'Updated every day'},
xAxis: {
type: 'datetime',
maxZoom: 7 * 24 * 3600000, // fourteen days
title: {text: null}
},
yAxis: {title: {text: 'Created items'}},
tooltip: {shared: true},
legend: {enabled: true},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: _data
});
}
如何通過我在查詢中收到的國家/地區名稱更改圖表中的“系列1”? 我在查詢中的數據有“日期”(YTD)的日期,但圖表顯示未來幾個月,我該如何糾正? 如果我的查詢中有多個國家/地區如何在多個圖表行中同時顯示該國家/地區。 提前致謝。
您只提供了一個系列,它只會轉換為一行。 嘗試類似的東西:
$res = db_query($sql);
$dat = array();
while($r = db_fetch_array($res)){
if (!isset($dat[$r['country']]))
$dat[$r['country']] = [];
$dat[$r['country']][] = array($r['date'], $r['items'], $r['country']);
}
// Armar
$start_date = '';
if(count($dat)>0){
$s = split(' ',$dat[0][0]);
$ss = split('-',$s[0]);
}
// Cada objeto en $dats es una grafica
$dats = [];
foreach ($dat as $country => $values) {
$dats[] = array('type'=>'line',
'name'=>$q['title'],
'pointInterval'=>24 * 3600 * 1000,
'pointStart'=>mktime(0,0,0,$ss[1],$ss[2],$ss[0])*1000,
'data'=>$values) ;
}
//echo "$sql";
echo json_encode($dats,JSON_NUMERIC_CHECK);
您的_data
應該類似於以下內容:
[{
name: 'USA',
data: [[Date.UTC(2013,5,1), 7.0], [Date.UTC(2013,6,1), 5.0]]
}, {
name: 'Germany',
data: [[Date.UTC(2013,5,1), 6.0], [Date.UTC(2013,6,1), 8.0]]
}, {
name: 'Japan',
data: [[Date.UTC(2013,5,1), 7.0], [Date.UTC(2013,6,1), 3.0]]
}]
所以你需要從你的_data
做一些映射
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.