javascript - Amchart x 轴值正在变化而不是移动/移动

Question

我的 x 轴值有问题，因为我使用的是实时 amchart，我的 x 轴值每 3 秒变化一次，但问题是它们在变化而不是移动，假设我有(8 月3) 而不是它向左移动，值更改为下一个!我想要它像这样滑动: https://codepen.io/team/amcharts/pen/be2767157df98e1f26caf7f50c524a9a

我的看起来像这样: https://codepen.io/team/amcharts/pen/e22f40f4db023433b142f0a01d165adb

如果您注意到(8 月 3 日)该值没有移动或一直移动到图表末尾，它会更改为下一个值，这是我的问题!

如果有帮助，这是我的代码:

  methods:{
    initChart(dataProvieded){
        chart = AmCharts.makeChart("chart"+num, {
              "type": "serial",
              "theme": "light",
              "synchronizeGrid":true,
              "marginTop":0,
              "marginRight": 80,
               "autoMarginOffset":90,
               "dataDateFormat": "YYYY-MM-DD",
              "dataProvider": dataProvieded,
              "zoomOutButton": {
                "backgroundColor": '#000000',
                "backgroundAlpha": 0.15
              },

              "valueAxes": [{ 
                  "axisAlpha": 1,
                  "position": "left",
              //   "autoWrap" : false,
                "minorGridEnabled": true,
                "autoGridCount": false,
                 "gridCount": 3,
             //    "min" : 5 ,
              //   "max" : 2,
            //     "strictMinMax": true,


              }],
              "graphs": [
                {  "id":"g1",
     "balloonText": "<img src='javascripts/images/info.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[value]]</b></span><img src='javascripts/images/time.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[category]]</b></span>",

                  "bullet": "round",
                  "bulletSize": 6,
                  "lineColor": "#003366",
                  "lineThickness": 1.5,
                  "negativeLineColor": "#637bb6",
                  "type": "smoothedLine",
                 "valueField": "value" },

              {
                  "id":"g2",
             "balloonText": "<img src='javascripts/images/info.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[value]]</b></span><img src='javascripts/images/time.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[category]]"+ new Date().toJSON().slice(0,10).replace(/-/g,'/') +"</b></span>",

                  "bullet": "round",
                  "bulletSize": 6,
                  "lineColor": "#00c78c",
                  "lineThickness": 1.5,
                  "negativeLineColor": "#637bb6",
                  "type": "smoothedLine",
                   "valueField": "value2"

              },
              {
                  "id":"g3",

               "balloonText": "<img src='javascripts/images/info.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[value]]</b></span><img src='javascripts/images/time.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[category]]</b></span>",

                  "bullet": "round",
                  "bulletSize": 6,
                  "lineColor": "#f23452",
                  "lineThickness": 1.5,
                  "negativeLineColor": "#637bb6",
                  "type": "smoothedLine",
                   "valueField": "value3",

              }],

              "chartScrollbar": {
                  "graph":"g1",
                  "gridAlpha":0,
                  "color":"#888888",
                  "scrollbarHeight":55,
                  "backgroundAlpha":0,
                  "selectedBackgroundAlpha":0.1,
                  "selectedBackgroundColor":"#000000",
                  "graphFillAlpha":0,
                  "autoGridCount":true,
                  "selectedGraphFillAlpha":0,
                  "graphLineAlpha":0.2,
                  "graphLineColor":"#c2c2c2",
                  "selectedGraphLineColor":"#888888",
                  "selectedGraphLineAlpha":1,
                  "autoGridCount": false,
                   "gridCount": 5,

              },
              "categoryField": "date",
              "categoryAxis": {
                 "minorGridEnabled": true,
                 "autoGridCount": false,
                 "gridCount": 5,
                 "dashLength" : 5,
              }


          }) 


           console.log ('zero');
                setInterval(function(){
                 console.log ('one');
                axios.get('/feeder/1/1').then(function(response){
                console.log ('two');
                    chart.dataProvider.shift();
                    var date0 = new Date(response.data[7]);
                    var hours = date0.getHours();
                    var minutes = "0" + date0.getMinutes();
                    var seconds = "0" + date0.getSeconds();
                    var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
                    console.log(formattedTime);
                    chart.dataProvider.push( {
                        date: formattedTime,
                        value: response.data[0] / 1000,
                        value2: response.data[1] / 1000,
                        value3: response.data[2] / 1000
                    } );
                    chart.validateData();
                    }); } , 3000);


        },

谢谢。

Answer 1

尝试删除区间函数中的 chart.dataProvider.shift(); 行。此行使您的 dataProvider 保持相同的长度，这会导致“替换”效果，而不是您正在寻找的移动效果。

要保持图表放大到特定时间段(而不是整个数据范围)，您可以使用图表的内置 zoomToIndexes 方法。

示例:如果要显示最近30天/数据项，添加:

chart.zoomToIndexes(chart.dataProvider.length - 30, chart.dataProvider.length - 1);

(就在 chart.validateData(); 行之后)。

(股票图表演示不需要这个，因为选择了“1 个月”时间段，因此图表会在每次 dataProvider 更新后自动重新缩放)。

这是更新的 Codepen 演示:https://codepen.io/team/amcharts/pen/5657b6c9662913a4693a370fd12d2a7b?editors=1010