AmCharts为不同类别但相同日期的点重复日期(x轴) [英] AmCharts duplicates date (x-axis) for points of different categories but same date
问题描述
AmCharts为不同类别但日期和时间相同的不同点重复日期(y轴).
E.G. 日期是x轴
point1，日期为01Jan2018 02:12:22，值123 point2，日期为01Jan2018 02:12:22，值223
AmCharts一次一个地显示它们(彼此之间不显示).
这是现在的编码方式
同一类别中的数据需要分组到序列图中的单个点，否则AmCharts将重复它们或引入其他奇怪行为.
听起来您的数据集看起来像这样:
[{
captured_datetime: "01Jan2018 02:12:22",
point1: 8
}, {
captured_datetime: "01Jan2018 02:12:22",
point2: 10
}]
您必须将其转换为此:
[{
captured_datetime: "01Jan2018 02:12:22",
point1: 8,
point2: 10
}]
AmCharts duplicates date (y-axis) for different points from different categories but same date and time.
E.G. date is a x-axis
point1 with date 01Jan2018 02:12:22 and value 123 point2 with date 01Jan2018 02:12:22 and value 223
AmCharts displays them one by one (not under each other).
here is how it`s coded now
<script>
function array_uq(arr){
var newArr = [];
for(var i in arr){
if(newArr.indexOf(arr[i][0])<0){
newArr.push(arr[i][0]);
}
}
return newArr;
}
var chartData = JSON.parse('<?= $chart['chart'] ?>');
chartData.push({
node_id: 0,
node_name: 0,
nd: 0,
sensor_type: 0,
captured_datetime: chartData[chartData.length - 1].captured_datetime,
value: 0
});
var types = JSON.parse('<?= $chart['types'] ?>');
var colors = JSON.parse('<?= $chart['colors'] ?>');
if (types[0] == "all") {
types = ["HU", "TM", "PD", "DW", "WC", "PW"];
}
var arr = $.map(types, function (value, index) {
return [value.match(/\D+/)];
});
var valueAxes = [{
"title": array_uq(arr).join(", "),
"position": "left"
}];
var graphs = [];
var offSet = 0;
for (var i in types) {
graphs.push({
"balloonText": "Sensor name: [[node_name]] <br> Sensor id: [[nd]] <br> Sensor value:[[value]]<br> Sensor type: [[sensor_type]]<br> Collecting date: [[captured_datetime]] <br>",
"bullet": "round",
"lineColor": colors[types[i]],
"bulletSize": 3,
"fillAlphas": types[i].indexOf("TMP") >= 0 ? 1 : 0,
"type": types[i].indexOf("TM") >= 0 ? "column" : "smoothedLine",
"labelPosition": "right",
"valueField": "value" + types[i],
})
}
graphs.push({
"balloonText": "",
"bullet": "round",
"lineColor": "#fff",
"bulletSize": 1,
"fillAlphas": 0,
"type": "smoothedLine",
"labelPosition": "right",
"valueField": "value",
})
AmCharts.makeChart("dashboard-chart", {
"type": "serial",
"theme": "dark",
"dataProvider": chartData,
"synchronizeGrid": true,
"valueAxes": valueAxes,
"graphs": graphs,
"categoryField": "captured_datetime",
'chartCursor': {
'cursorPosition': 'mouse',
'cursorColor': '#ffa500',
"valueLineBalloonEnabled": false,
"valueLineEnabled": true,
},
"categoryAxis": {
"gridPosition": "middle",
"labelRotation": 75,
"minorGridEnabled": true
},
"responsive": {
"enabled": true
},
"valueScrollbar": {
"autoGridCount": true,
"color": "#000000",
"scrollbarHeight": 50
},
});
</script>
Data in the same category needs to be grouped into a single point in a serial chart, otherwise AmCharts will duplicate them or introduce other odd behavior.
It sounds like your dataset looks like this:
[{
captured_datetime: "01Jan2018 02:12:22",
point1: 8
}, {
captured_datetime: "01Jan2018 02:12:22",
point2: 10
}]
You have to convert it to this:
[{
captured_datetime: "01Jan2018 02:12:22",
point1: 8,
point2: 10
}]
这篇关于AmCharts为不同类别但相同日期的点重复日期(x轴)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
