AmCharts 为不同类别但相同日期的点复制日期(x 轴) [英] AmCharts duplicates date (x-axis) for points of different categories but same date
问题描述
AmCharts 为来自不同类别但相同日期和时间的不同点复制日期(y 轴).
AmCharts duplicates date (y-axis) for different points from different categories but same date and time.
E.G.日期是 x 轴
E.G. date is a x-axis
point1，日期为 01Jan2018 02:12:22，值为 123point2 的日期为 01Jan2018 02:12:22，值为 223
point1 with date 01Jan2018 02:12:22 and value 123 point2 with date 01Jan2018 02:12:22 and value 223
AmCharts 将它们一一显示(而不是在彼此之下).
AmCharts displays them one by one (not under each other).
这是它现在的编码方式
<代码>
<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>
推荐答案
同一类别的数据需要在串行图表中组合成一个点，否则 AmCharts 会复制它们或引入其他奇怪的行为.
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屋！
