3D チャートを使用してハイチャートにデータを表示する方法-jsチュートリアル-php.cn

3D チャートを使用してハイチャートにデータを表示する方法

WBOY

リリース： 2023-12-18 08:18:44

オリジナル

1206 人が閲覧しました

3D チャートを使用してハイチャートにデータを表示する方法

Highcharts は、3D グラフを含むさまざまな種類のグラフを提供する、非常に人気のある JavaScript グラフ作成ライブラリです。この記事では、3D チャートを使用してハイチャートにデータを表示する方法を詳しく紹介し、具体的なコード例を示します。

Highcharts ライブラリの紹介

まず、HTML ファイルに Highcharts ライブラリを導入する必要があります。これは次の方法で実現できます。

<script src="https://code.highcharts.com/highcharts.js"></script>

ログイン後にコピー

データの準備

3D グラフに表示するデータを準備する必要があります。このデータは通常、配列で構成される JavaScript オブジェクトです。例:

var data = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
   series: [{
       name: 'Tokyo',
       data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, {
       name: 'New York',
       data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
   }, {
       name: 'Berlin',
       data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   }, {
       name: 'London',
       data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }]
};

ログイン後にコピー

このオブジェクトには 4 つの異なるデータシリーズが含まれています。各シリーズには名前と配列が含まれています。配列内の各要素はデータポイントを表します。

3D グラフの作成

次に、3D グラフを作成できます。まず、作成するチャートの種類を決定する必要があります。 Highcharts は、3D 縦棒グラフ、3D 散布図、3D 円筒グラフ、3D マップなど、いくつかの異なるタイプの 3D グラフを提供します。この記事では、次のコードを使用して 3D 縦棒グラフを作成します。

Highcharts.chart('container', {
    chart: {
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
        text: 'Monthly Average Temperature'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: data.categories
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        }
    },
    plotOptions: {
        column: {
            depth: 25
        }
    },
    series: data.series
});

ログイン後にコピー

まず、HTML ドキュメント内に「container」という名前の div を定義します。これには、作成したグラフが含まれます。

次に、Highcharts.chart() メソッドを使用してグラフを作成します。グラフのオプションで、タイプを「縦棒」に設定します。これは、縦棒グラフを作成することを意味します。また、options3d オプションを設定し、3D 機能を有効にし、アルファ角度とベータ角度、深さなどのいくつかの 3D パラメーターを設定します。

また、いくつかのタイトルと軸のオプション、および縦棒グラフの深さを設定するために使用される、plotOptions の列オプションも定義します。

最後に、データシリーズを指定し、前に定義したデータオブジェクトを使用して各シリーズの名前とデータを設定します。

コードの実行

コードの準備ができたので、ブラウザで実行できます。 HTML ファイルをロードしてグラフを表示すると、前に定義したデータを使用して各月の平均気温を示す 3D 縦棒グラフが表示されます。

コード例は、次のコードリポジトリで参照できます:

https://github.com/Jackie199199/Highcharts-3D-Demo

要約

Highcharts は、3D グラフを含むさまざまなグラフの種類と関数を提供する非常に強力な JavaScript グラフ作成ライブラリです。この記事では、Highcharts で 3D チャートを作成する方法を説明し、具体的なコード例を示します。高品質でインタラクティブなデータ視覚化を Web ページまたはアプリケーションに追加したい場合は、Highcharts が最適なオプションの 1 つになる可能性があります。

以上が3D チャートを使用してハイチャートにデータを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。