AmCharts.jsの新機能です。私は、複数の値軸を持つチャートを作成して、datetime(時間ではなく、より良い分)(日付ではない)に従って、1つの製品の異なるWebサイトでの価格の発生を表します。複数の値軸と日付時刻
私はお互いに依存しない複数の線で図を描く必要があります。だから私が1つの値がnullの場合、2行目の値は引き続き引き出されます。
各製品の出現数が異なるため、色やデータセットの別のプロパティをハードコードできません。
私が見つけた最良のアプローチの1つはAmStockChartであるため、複数の行を描くことができます。しかし、複数の問題があります。そのうちの1つは、ある行を別の行と "比較"する必要があるため、datetime xxxの値がない場合、このdatetimeに対してline2の値は表示されません。
日時は異なります(1行は12.01 13:00、もう1つは14:00などです)。
これは、比較する必要があるため正しく機能しない私の解決策です。
JSONは次のとおりです。{'web_name':[[[year,month,day,hour...],price],[[[year,month....}
<script>
var lines = [];
var dataSets = [];
generateChartData();
function generateChartData() {
var google_chart_json = JSON;
var loopcounter = -1;
$.each(google_chart_json, function (key, val) {
var line = [];
loopcounter = loopcounter + 1;
$.each(val, function (_, scan) {
var year = scan[0][0];
var month = scan[0][1];
var day = scan[0][2];
var hour = scan[0][3];
var minute = scan[0][4];
var price = scan[1];
var data = {
'date': new Date(year, month - 1, day, hour, minute),
'value': price
};
line.push(data);
});
line.sort(function (lhs, rhs) {
return lhs.date.getTime() - rhs.date.getTime();
});
lines.push([key, line]);
});
console.log('LINES');
console.log(lines);
$.each(lines, function (_, name_line) {
var dict = {
'title': name_line[0],
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}],
"dataProvider": name_line[1],
"categoryField": "date"
};
dataSets.push(dict);
});
}
console.log(dataSets)
var chart = AmCharts.makeChart("chartdiv", {
"allLabels": [
{
"text": "Free label",
"bold": true,
"x": 20,
"y": 20
}
],
categoryAxesSettings: {
minPeriod: "hh",//(at least that is not grouped)
groupToPeriods: ["DD", "WW", "MM"]//(Data will be grouped by day,week and month)
},
"type": "stock",
"theme": "light",
"dataSets": dataSets,
"panels": [{
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [{
"id": "g1",
"valueField": "value",
"comparable": true,
"compareField": "value",
"balloonText": "[[date]][[title]]:<b>[[value]]</b>",
"compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
}],
"stockLegend": {
"periodValueTextComparing": "[[percents.value.close]]%",
"periodValueTextRegular": "[[value.close]]"
}
}],
{#https://docs.amcharts.com/javascriptcharts/ChartScrollbar#}
"chartScrollbarSettings": {
"graph": "g1",
"color": "#333333"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"cursorAlpha": 0.1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
},
"periodSelector": {
"position": "left",
"periods": [{
"period": "MM",
"selected": true,
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
}]
},
"dataSetSelector": {
"position": "left",
},
"export": {
"enabled": true
}
});
chart.panelsSettings.recalculateToPercents = "never";
</script>
私は値を同じ日付時刻を入れると、それはラインを示しています。しかし、それぞれの値が異なる日時を持っているとき、それは最初の行を除いては何も示していますそれらの異なる数があるので
別の解決策(Line chart FiddleJS)は私が行うことができないラインをハードコードしています。しかし、主な問題は、彼ら自身の価値観の軸があることです。
複数の折れ線グラフと異なる値と行の異なる日付時刻を比較しないようにするために、コード内で何をすべきか教えてください。または、もしあなたが知っていれば、このすべてを行うことができるいくつかのタイプのアンチャートをお勧めしますか?