الرسوم المتحركة الديناميكية للجرافانا عبر مخططات أباتشي

لذلك، أنا أستخدم مكونًا إضافيًا مخصصًا Apache Echarts لـ grafana. أحاول تنفيذ ميزة الانتقال الشامل لـ ECharts في كود JavaScript الخاص بي للتبديل ديناميكيًا بين المخطط الشريطي والمخطط الدائري بناءً على فاصل زمني محدد. هل هذا ممكن أم أنني أضيع وقتي فقط؟

ما حاولت:

لقد استخدمت JS أدناه للحصول على الرسوم المتحركة المطلوبة ولكن لم ينعكس أي شيء في Grafana.

let intervalData = [];
let systemCount = [];
let isPieChart = false; 

data.series.map((s) => {
  if (s.refId === "A") {
    intervalData = s.fields.find((f) => f.name === "Interval").values;
    systemCount = s.fields.find((f) => f.name === "System Count").values;
  }
});

const colors = [
  '#2b821d',
  '#c12e34',
  '#0098d9',
  '#005eaa',
  '#339ca8',
  '#cda819',
  '#32a487',
  '#e6b600'
];

const barOption = {
  color: colors,
  tooltip: {
    show: true,
  },
  legend: { show: true },
  xAxis: {
    type: 'category',
    data: intervalData,
    name: 'Interval',
    nameLocation: 'middle',
    nameGap: 35,
    axisLabel: {
      fontWeight: 'bold',
    },
  },
  yAxis: {
    type: 'value',
    name: 'System Count',
    nameLocation: 'middle',
    nameGap: 40,
    axisLabel: {
      fontWeight: 'bold',
    },
  },
  series: [
    {
      data: systemCount,
      name: 'System Count',
      type: 'bar',
      smooth: true,
      barWidth: 15,
    },
  ],
};

const pieOption = {
  color: colors,
  tooltip: {
    show: true,
  },
  legend: { show: true },
  dataset: {
    dimensions: ['name', 'count'],
    source: intervalData.map((interval, index) => [interval, systemCount[index]]),
  },
  series: [
    {
      type: 'pie',
      radius: [0, '50%'],
    },
  ],
};

function toggleChartOption() {
  isPieChart = !isPieChart;
  return isPieChart ? pieOption : barOption;
}

setInterval(() => {
  myChart.setOption(toggleChartOption(), true);
}, 2000);