ピクトグラム棒グラフを使用して ECharts にデータを表示する方法-jsチュートリアル-php.cn

ピクトグラム棒グラフを使用して ECharts にデータを表示する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2023-12-17 10:29:03

オリジナル

1320 人が閲覧しました

ピクトグラム棒グラフを使用して ECharts にデータを表示する方法

ピクトグラムを使用して ECharts にデータを表示するには、特定のコード例が必要です

データ視覚化の分野では、ECharts は強力で使いやすいオープンソースです。視覚化ライブラリ。直感的な方法でデータを表示するのに役立つ豊富なグラフの種類が提供されます。その中でも絵文字縦棒グラフは、データを鮮やかなグラフィックで表示できる直感的で興味深いグラフの種類です。この記事では、ピクトグラムを使用して ECharts にデータを表示する方法を紹介し、具体的なコード例を示します。

まず、ECharts ライブラリファイルを導入する必要があります。オンライン CDN を通じてインポートすることも、ライブラリファイルをダウンロードした後にローカルにインポートすることもできます。ライブラリファイルを導入したら、ECharts を使用してピクトグラムチャートを作成できるようになります。

次に、表示するデータを準備する必要があります。猫、犬、鳥、魚などの多数の動物を表示するとします。データはオブジェクトの配列で表すことができ、各オブジェクトには動物の名前と数が含まれます。例:

var data = [
  { name: '猫', value: 10 },
  { name: '狗', value: 15 },
  { name: '鸟', value: 8 },
  { name: '鱼', value: 20 }
];

ログイン後にコピー

次に、チャートインスタンスを作成し、その基本構成を設定する必要があります。たとえば、コンテナ要素を作成し、ECharts が提供する echarts.init メソッドを使用してチャートを初期化できます。

var chart = echarts.init(document.getElementById('chart-container'));

ログイン後にコピー

次に、タイトル、凡例、軸などのグラフの基本プロパティを設定できます。たとえば、グラフのタイトルを「動物の数の統計」、軸の名前を「動物」と「数」に設定し、グラフに凡例を追加して各動物の名前を表示することができます。コード例は次のとおりです。

chart.setOption({
  title: {
    text: '动物数量统计'
  },
  legend: {
    data: ['猫', '狗', '鸟', '鱼']
  },
  xAxis: {
    name: '动物'
  },
  yAxis: {
    name: '数量'
  },
  series: []
});

ログイン後にコピー

最後に、ピクトグラム縦棒グラフの特定のデータを追加する必要があります。 ECharts では、series 属性を使用してグラフデータを設定できます。 type: 'pictorialBar' を使用してグラフの種類を絵入り棒グラフとして指定し、使用するシンボルを symbol 属性で指定する必要があります。ここでは、ECharts が提供するデフォルトのシンボルを使用することも、カスタムシンボルを使用することもできます。コード例は次のとおりです。

chart.setOption({
  // 之前的配置...
  series: [{
    type: 'pictorialBar',
    symbol: 'circle',
    data: data.map(function(item) {
      return {
        value: item.value,
        symbolSize: [30, 30], // 符号的大小
        symbolOffset: [0, '-50%'], // 符号的偏移量
        name: item.name
      };
    })
  }]
});

ログイン後にコピー

上記の手順を完了すると、ピクトグラムを使用してデータを表示する ECharts チャートが正常に作成されました。

要約すると、ピクトグラムを使用して ECharts でデータを表示する手順は次のとおりです。