Question

我的x轴值存在问题，因为我使用实时amchart我的x轴值每3秒更改一次，但问题是它们正在改变而不是移动，让＆＃ 39; s说我有（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

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

1 个答案: