Question

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

E.G。日期是一个x轴

point1，日期01Jan2018 02:12:22，值123 point2 with date 01Jan2018 02:12:22 and value 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>

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

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

1 个答案: