日本語
日本語
インターネットテクノロジーの開発により、データの視覚化は、データ分析と意思決定サポートの不可欠な部分になりました。直感的で理解しやすい表示方法としての統計チャートは、広く使用されています。 Echartsは、豊富なチャートタイプと機能を備えた強力でオープンソースチャートライブラリであり、開発者に広く好まれています。
この記事では、特定の例を組み合わせて、ECHARTSとPHPインターフェイスを使用して、ラベルと凡例の統計チャートを生成する方法を説明します。
まず、Echarts関連のリソースをプロジェクトに導入する必要があります。公式WebサイトまたはGitHubから最新バージョンを取得し、プロジェクトディレクトリに配置し、HTMLに対応するJSおよびCSSファイルを導入できます。
PHP側では、データは通常、データベースクエリまたは呼び出しAPIを介して取得され、フロントエンド使用のためにJSON形式に変換されます。サンプルデータは次のとおりです。
$data = [
['name' => '伝説1', 'value' => 100],
['name' => '伝説2', 'value' => 200],
['name' => '伝説3', 'value' => 300],
// ...
];HTMLファイルで、チャートを表示するコンテナ要素を作成します。
<div id="chart" style="width: 600px; height: 400px;"></div>次に、JavaScriptコードを介してEchartsインスタンスを初期化し、チャートを構成します。
// 紹介されたECharts図書館
import echarts from 'echarts';
// コンテナ要素を取得します
var chartContainer = document.getElementById('chart');
// 初期化ECharts例
var chart = echarts.init(chartContainer);
// チャートの構成項目とデータを設定します
var option = {
title: {
text: '統計チャート',
subtext: 'データソース: PHPインタフェース',
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
},
legend: {
orient: 'vertical',
left: 'left',
data: <?=json_encode(array_column($data, 'name'))?>,
},
series: [
{
name: 'タグ名',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: <?=json_encode($data)?>,
label: {
normal: {
show: true,
formatter: '{b} : {c} ({d}%)',
},
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
},
},
},
],
};
// 指定したばかりの構成アイテムとデータを使用してチャートを表示します
chart.setOption(option);コードでは、最初にEchartsライブラリを導入し、チャートコンテナを取得し、次にecharts.init（）を介してチャートインスタンスを作成します。オプションオブジェクトは、チャートのタイトル、プロンプトボックス、凡例、一連のデータを定義します。ここでは、パイチャートが使用され、ラベルと凡例は、PHPインターフェイスを介して動的に生成されたデータを介して表示されます。
最後に、 setoption（）メソッドを呼び出して、チャートのレンダリングを完了します。
ECHARTSとPHPインターフェイスに基づいて統計チャートを実装する主な手順：
上記の手順を通じて、データ表示効果とユーザーエクスペリエンスを改善するためのニーズに応じて、より多様でリッチな統計的グラフィックをカスタマイズできます。この記事があなたのデータ視覚化プロジェクトに役立つことを願っています。
