ピクトグラム棒グラフを使用して 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 でデータを表示する手順は次のとおりです。

1. ECharts のライブラリ ファイルを紹介します。
2. 表示するデータを準備します。
3. チャート インスタンスを作成し、その基本構成を設定します。
4. ピクトグラム縦棒グラフに特定のデータを追加します。

この記事が、読者がピクトグラムを使用して ECharts にデータを表示する方法を理解し、コード例を通じてより直観的に理解するのに役立つことを願っています。 EChart を使用してピクトグラムを作成すると、データがより興味深く視覚的になり、データの表示効果が向上します。

以上がピクトグラム棒グラフを使用して ECharts にデータを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。