Значения оси x амхарта меняются, не двигаясь / не сдвигаясь

Question

Значения оси x амхарта меняются, не двигаясь / не сдвигаясь

1

У меня проблема с моими значениями оси x, так как я использую amhart в реальном времени, мои значения по оси x меняются каждые 3 секунды, но проблема в том, что они меняются, не двигаясь, скажем, у меня (3 августа) его перемещение влево значение меняется на следующее! Я хочу, чтобы он так слайд как этот: https://codepen.io/team/amcharts/pen/be2767157df98e1f26caf7f50c524a9a

Шахта выглядит так: https://codepen.io/team/amcharts/pen/e22f40f4db023433b142f0a01d165adb

Если вы заметите, что там (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);


        },

Спасибо.

user8393084 02 авг. 2017, в 06:52

Источник

Теги:

javascript

css

web

amcharts

1 ответ

Ещё вопросы

Robbert · Accepted Answer · 2017-08-02T04-16-00.000Z

Попробуйте удалить строку chart.dataProvider.shift(); в вашей функции интервалов. Эта строка сохраняет ваш dataProvider одинаковой длины, и это приводит к эффекту "replace" вместо эффекта перемещения, который вы ищете.

Чтобы диаграмма была увеличена до определенного периода (вместо всего диапазона данных), вы можете использовать встроенный метод 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