ECharts ヒート マップ: データ密度分布を表示する方法

Eグラフ ヒート マップ: データ密度分布を表示する方法。特定のコード サンプルが必要です。

ヒート マップは、データ密度分布を色レベルで表示するグラフの一種です。データ視覚化の分野では、空間または時間における大量のデータの分布を表示するためにヒート マップがよく使用されます。 ECharts は、ヒート マップを含むさまざまな種類のグラフを提供するオープン ソース データ視覚化ライブラリです。この記事では、ECharts を使用してデータ密度分布を表示する方法と、具体的なコード例を紹介します。

まず、表示するデータを準備する必要があります。データが都市のさまざまなエリアの人口密度であると仮定します。これらのデータを表すには 2 次元配列を使用でき、配列の各要素はエリアの人口密度を表します。便宜上、乱数を使用してサンプル データを生成できます。 JavaScript では、Math.random() を使用して 0 から 1 までの乱数を生成できます。以下は、サンプル データを生成するコードです。

// 生成示例数据
var data = [];
for (var i = 0; i < 10; i++) {
  var row = [];
  for (var j = 0; j < 10; j++) {
    var density = Math.random(); // 生成随机的人口密度
    row.push(density);
  }
  data.push(row);
}

コードでは、2 つのネストされた for ループを使用して 10x10 の 2 次元配列を生成し、各要素の値はランダムな人口密度です。

次に、ECharts インスタンスを作成し、ヒート マップの関連パラメーターを構成する必要があります。まず、ECharts ライブラリ ファイルを導入する必要があります。 HTML ファイルでは、次のコードを使用して ECharts を導入できます:

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

次に、JavaScript で次のコードを使用して ECharts インスタンスを作成し、ヒート マップのパラメーターを構成できます:

// 创建ECharts实例
var myChart = echarts.init(document.getElementById('chart'));

// 配置热力图的参数
var option = {
  tooltip: {
    position: 'top',
    formatter: '{c}'
  },
  visualMap: {
    min: 0,
    max: 1,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '15%'
  },
  series: [{
    type: 'heatmap',
    data: data,
    label: {
      show: true
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
};

// 使用配置项显示热力图
myChart.setOption(option);

コードでは、まず echarts.init() メソッドを使用して ECharts インスタンスを作成し、DOM 要素の ID を渡します。次に、ツールチップ（プロンプトボックス）の位置や形式、ビジュアルマップ（ビジュアルマップ）の範囲や位置など、ヒートマップのパラメータを設定しました。最後に、設定項目を setOption() メソッドに渡して、ヒート マップを表示します。

最後に、HTML ファイルで次のコードを使用して、ヒート マップを表示するコンテナを作成できます。

<div id="chart" style="width: 600px; height: 400px;"></div>

コードでは、ID が「chart」の div 要素を作成します。 」を選択し、幅と高さを設定します。

これで、ECharts を使用してデータ密度分布を表示するプロセスが完了しました。上記のコード例を通して、ECharts を使用してヒート マップを作成するのは非常に簡単で、さまざまなニーズを満たすためにさまざまなパラメーターを構成できることがわかります。この記事が、ECharts を使用してデータ密度分布を表示する際に役立つことを願っています。他に質問やニーズがある場合は、ECharts の公式ドキュメント (https://echarts.apache.org/) を参照してください。このドキュメントには、より詳細な概要とサンプル コードが記載されています。

以上がECharts ヒート マップ: データ密度分布を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。