【解決方法】Apache echarts を介した grafana の動的アニメーション

プログラミングQA

[ad_1]

そこで、grafana 用のカスタム プラグイン Apache Echarts を使用しています。 定義された間隔に基づいて棒グラフと円グラフを動的に切り替えるために、ECharts のユニバーサル遷移機能を JavaScript コードに実装しようとしています。 これは可能ですか?それとも時間を無駄にしているだけですか?

私が試したこと:

以下の JS を使用して目的のアニメーションを取得しましたが、Grafana には何も反映されません。

JavaScript
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);

解決策 1

あなたが尋ねているのは、おそらくここにも他のフォーラムにも誰も知識や経験を持たない特定のライブラリについて質問しているのです。

eCharts サイトを見ると、電子メールによる独自のサポート ネットワークがあることがわかります。 このページで説明されているように、購読するだけです。 メーリング リスト – Apache ECharts[^]。

[ad_2]

コメント

タイトルとURLをコピーしました