AmCharts duplicates date (x-axis) for points of different categories but same date

问题

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>

回答1:

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
}]

来源：https://stackoverflow.com/questions/48572725/amcharts-duplicates-date-x-axis-for-points-of-different-categories-but-same-da