график vue-apexchart в реальном времени не гладкий

В apexcharts график в реальном времени не является гладким.

когда я использую только одну диаграмму, работаю без сбоев. но две диаграммы, работающие не плавно

Я просто следил за официальной демонстрацией (https://apexcharts.com/vue-chart-demos/line-charts/realtime/) и просто добавьте еще одну диаграмму и добавьте функцию для второй диаграммы. полный код находится здесь https://codesandbox.io/s/vue-template-fhjbr?fontsize=14

и это часть кода

// html codes

var data1 = [];
var data2 = [];

function getDayWiseTimeSeries(baseval, count, yrange) {
  var i = 0;
  while (i < count) {
    var x = baseval;
    var y =
      Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

    data1.push({
      x,
      y
    });
    data2.push({
      x,
      y
    });
    lastDate = baseval;
    baseval += 86400000;
    i++;
  }
}

getDayWiseTimeSeries(new Date("11 Feb 2017 GMT").getTime(), 10, {
  min: 10,
  max: 90
});

function getNewSeries(baseval, yrange) {
  var newDate = baseval + 86400000;
  lastDate = newDate;
  data1.push({
    x: newDate,
    y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
  });
  data2.push({
    x: newDate,
    y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
  });
}

function resetData() {
  data1 = data1.slice(data1.length - 10, data1.length);
  data2 = data2.slice(data2.length - 10, data2.length);
}

export default {
  name: "home",
  components: {
    apexchart: VueApexCharts
  },
  data() {
    return {
      series1: [
        {
          data: data1.slice()
        }
      ],
      series2: // same with series1
      chartOptions: {
        chart: {
          animations: {
            enabled: true,
            easing: "linear",
            dynamicAnimation: {
              speed: 900
            }
        //...
      }
    };
  },
  mounted() {
    this.intervals1();
    this.intervals2();
  },
  methods: {
    intervals1: function() {
      var me = this;
      window.setInterval(function() {
        getNewSeries(lastDate, {
          min: 10,
          max: 90
        });
        console.log(data1);
        me.$refs.realtimeChart1.updateSeries([
          {
            data: data1
          }
        ]);
      }, 900);

      // every 60 seconds, we reset the data to prevent memory leaks
      ...
    },
    intervals2: //same with intervals1()
  }
};
</script>

javascript vue.js apexcharts
person rura6502    schedule 03.09.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

dynamicAnimation в вашем codeandbox отличается от dynamicAnimation. Он должен быть ниже единицы

dynamicAnimation: {
    speed: 1000
}

А также вы вызываете два метода intervals1() и intervals2(). вместо вызова двух методов просто создайте одну функцию intervals() и в ней вы можете установить данные диаграммы.

Проверьте этот рабочий пример с двумя диаграммами.

Фрагмент кода

export default {
  name: "home",
  components: {
    apexchart: VueApexCharts
  },
  data() {
    return {
      series1: [{ data: data1.slice() }],
      series2: [{ data: data2.slice() }],
      chartOptions: {
        chart: {
          animations: {
            enabled: true,
            easing: "linear",
            dynamicAnimation: {
              speed: 1000
            }
          },
          toolbar: {
            show: false
          },
          zoom: {
            enabled: false
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: "smooth"
        },

        title: {
          text: "Dynamic Updating Chart",
          align: "left"
        },
        markers: {
          size: 0
        },
        xaxis: {
          type: "datetime",
          range: 777600000
        },
        yaxis: {
          max: 100
        },
        legend: {
          show: false
        }
      }
    };
  },
  mounted() {
    this.intervals();
  },
  methods: {
    intervals: function() {
      var me = this;
      window.setInterval(function() {
        getNewSeries(lastDate, { min: 10, max: 90 });
        me.$refs.realtimeChart1.updateSeries([{ data: data1 }]);
        me.$refs.realtimeChart2.updateSeries([{ data: data2 }]);
      }, 1000);

      // every 60 seconds, we reset the data to prevent memory leaks
      window.setInterval(function() {
        resetData();
        me.$refs.realtimeChart1.updateSeries([{ data: [] }], false, true);
        me.$refs.realtimeChart2.updateSeries([{ data: [] }], false, true);
      }, 60000);
    }
  }
};
person Narendra Jadhav    schedule 03.09.2019
comment
о, это моя ошибка. Я просто переоделся для теста. Но все равно не получилось плавной анимации. Не могли бы вы сравнить с официальным примером ссылки в моем вопросе? Я думаю, что в нашем примере эту проблему можно проверять каждые 1000 мс. - person rura6502; 04.09.2019
comment
Снова в вашем codeandbox dynamicAnimation 980. а также вы вызываете эти функции this.intervals1() ,this.intervals2();. Вам просто нужно создать функцию одного интервала, и эту функцию вы можете установить как данные диаграммы. Проверьте мою папку с кодами. - person Narendra Jadhav; 04.09.2019
comment
Ссылка codeandbox не работает: this.chart.updateSeries не является функцией - person mspoulsen; 15.04.2021