AmCharts 为不同类别但相同日期的点重复日期（x 轴）答案

【问题标题】：AmCharts duplicates date (x-axis) for points of different categories but same dateAmCharts 为不同类别但相同日期的点重复日期（x 轴）
【发布时间】：2018-02-01 22:21:39
【问题描述】：

AmCharts 为来自不同类别但相同日期和时间的不同点复制日期（y 轴）。

例如日期是 x 轴

point1，日期为 01Jan2018 02:12:22，值为 123 point2，日期为 01Jan2018 02:12:22，值为 223

AmCharts 将它们一一显示（不在彼此下方）。

这是它现在的编码方式

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

【问题讨论】：

标签： php amcharts

【解决方案1】：

需要将同一类别的数据分组到序列图中的一个点，否则 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
}]

【讨论】：