HighCharts 描画 2D ドーナツ チャート効果の例の共有
この記事では、主に 2D ドーナツ チャートを描画するための jQuery プラグイン HighCharts の効果を紹介し、HighCharts プラグインを使用してドーナツ チャートを描画するための jQuery の実装手順と関連する操作テクニックを例の形式で分析します。デモのソースコードが付属しているので、困っている友人が参考にできるようにダウンロードしていただければ幸いです。
この記事の例では、jQuery プラグイン HighCharts を使用して 2D ドーナツ チャートを描画する効果について説明します。参考として、次のようにみんなと共有してください:
1. コード例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D圆环图</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
$(function(){
var colors = Highcharts.getOptions().colors,
categories = ['花', '树', '鱼', '鸟', '鲸'],
name = 'Browser brands',
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: '花的种类',
categories: ['梅花', '桃花', '梨花', '樱花'],
data: [13.6, 7.35, 33.06, 2.81],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: '树的种类',
categories: ['樟树', '桉树', '茶树', '桃树', '梨树'],
data: [15.20, 3.83, 18.58, 13.12, 45.43],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: '鱼的种类',
categories: ['鲫鱼', '鲢鱼', '草鱼', '青鱼', '鲦鱼','鳙鱼', '鲥鱼'],
data: [41.12, 10.19, 11.12, 14.36, 21.32, 9.91, 17.50],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: '鸟的种类',
categories: ['松鸡', '卷尾', '鹪鹩', '岩鹨', '山鹑','画眉', '金鸡'],
data: [14.55, 19.42, 16.23, 16.21, 18.20, 23.19, 10.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: '鲸的种类',
categories: ['须鲸', '蓝鲸', '虎鲸'],
data: [ 24.12, 18.37, 32.65],
color: colors[4]
}
}];
// 构建物种数据
var speciesData = [];
var speData = [];
for (var i = 0; i < data.length; i++) {
// 添加物种数据
speciesData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
for (var j = 0; j < data[i].drilldown.data.length; j++) {
var brightness = 0.4 - (j / data[i].drilldown.data.length) / 5 ;
speData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// 创建圆环图
$('#donutChart').highcharts({
chart: {
type: 'pie'
},
title: {
text: '物种数量及其比例'
},
yAxis: {
title: {
text: '比例'
}
},
plotOptions: {
pie: {
shadow: true,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: '物种',
data: speciesData,
size: '70%',
dataLabels: {
formatter: function() {
return this.y > 5 ? this.point.name : null;
},
color: 'white',
distance: -30
}
}, {
name: '数量',
data: speData,
size: '80%',
innerSize: '80%',
dataLabels: {
formatter: function() {
return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null;
}
}
}]
});
});
</script>
</head>
<body>
<p id="donutChart" style="width: 1250px; height: 550px; margin: 0 auto"></p>
</body>
</html>2. 操作レンダリング:
関連する推奨事項:
HighCharts は凡例効果を使用して 2D 円グラフを描画します。共有
phpを介してハイチャートにデータを動的に転送する方法の詳細な説明
以上がHighCharts 描画 2D ドーナツ チャート効果の例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7724
15
1643
14
1396
52
1290
25
1233
29
Python での SVM の例
Jun 11, 2023 pm 08:42 PM
Python のサポート ベクター マシン (SVM) は、分類および回帰の問題を解決するために使用できる強力な教師あり学習アルゴリズムです。 SVM は、高次元データや非線形問題を処理する場合に優れたパフォーマンスを発揮し、データ マイニング、画像分類、テキスト分類、バイオインフォマティクスなどの分野で広く使用されています。この記事では、Python で分類に SVM を使用する例を紹介します。 scikit-learn ライブラリの SVM モデルを使用します。
サンキー チャートを使用してハイチャートにデータを表示する方法
Dec 17, 2023 pm 04:41 PM
サンキー ダイアグラムを使用してハイチャートにデータを表示する方法 サンキー ダイアグラム (SankeyDiagram) は、フロー、エネルギー、資金などの複雑なプロセスを視覚化するために使用されるチャート タイプです。さまざまなノード間の関係とフローを明確に表示できるため、データの理解と分析が容易になります。この記事では、Highcharts を使用して Sankey チャートを作成およびカスタマイズする方法を、具体的なコード例とともに紹介します。まず、Highcharts ライブラリと Sank をロードする必要があります。
ハイチャートで動的データを使用してリアルタイム データを表示する方法
Dec 17, 2023 pm 06:57 PM
ハイチャートで動的データを使用してリアルタイム データを表示する方法 ビッグ データ時代の到来により、リアルタイム データの表示がますます重要になってきました。 Highcharts は人気のあるグラフ作成ライブラリとして、豊富な機能とカスタマイズ性を提供し、リアルタイム データを柔軟に表示できます。この記事では、ハイチャートで動的データを使用してリアルタイム データを表示する方法と、具体的なコード例を紹介します。まず、リアルタイム データを提供できるデータ ソースを準備する必要があります。この記事では、私は
ハイチャートを使用してガント チャートを作成する方法
Dec 17, 2023 pm 07:23 PM
Highcharts を使用してガント チャートを作成する方法には、特定のコード サンプルが必要です。はじめに: ガント チャートは、プロジェクトの進捗状況や時間管理を表示するためによく使用されるチャート形式です。タスクの開始時刻、終了時刻、進捗状況を視覚的に表示できます。 Highcharts は、豊富なチャート タイプと柔軟な構成オプションを提供する強力な JavaScript チャート ライブラリです。この記事では、Highcharts を使用してガント チャートを作成する方法と具体的なコード例を紹介します。 1. ハイチャート
積み上げチャートを使用してハイチャートにデータを表示する方法
Dec 18, 2023 pm 05:56 PM
積み上げチャートを使用してハイチャートにデータを表示する方法 積み上げチャートはデータを視覚化する一般的な方法で、複数のデータ系列の合計を同時に表示し、各データ系列の寄与を棒グラフの形式で表示できます。 Highcharts は、さまざまなデータ視覚化のニーズを満たすための豊富な種類のグラフと柔軟な構成オプションを提供する強力な JavaScript ライブラリです。この記事では、Highcharts を使用して積み上げグラフを作成し、提供する方法を紹介します。
ハイチャートを使用してマップ ヒート マップを作成する方法
Dec 17, 2023 pm 04:06 PM
ハイチャートを使用してマップ ヒート マップを作成するには、特定のコード サンプルが必要です。ヒート マップは、さまざまな色合いで各エリアのデータ分布を表現できる視覚的なデータ表示方法です。データ視覚化の分野では、Highcharts は非常に人気のある JavaScript ライブラリであり、豊富なチャート タイプと対話型関数を提供します。この記事では、Highcharts を使用してマップ ヒート マップを作成する方法を紹介し、具体的なコード例を示します。まず、いくつかのデータを準備する必要があります
VUE3 入門例: 簡単なビデオ プレーヤーの作成
Jun 15, 2023 pm 09:42 PM
新世代のフロントエンド フレームワークが出現し続ける中、VUE3 は高速で柔軟、そして使いやすいフロントエンド フレームワークとして愛されています。次に、VUE3 の基本を学び、簡単なビデオ プレーヤーを作成しましょう。 1. VUE3 をインストールする まず、VUE3 をローカルにインストールする必要があります。コマンド ライン ツールを開き、次のコマンドを実行します。 npminstallvue@next 次に、新しい HTML ファイルを作成し、VUE3 を導入します。 <!doctypehtml>
Golang でのポインター変換のベスト プラクティスの例を学ぶ
Feb 24, 2024 pm 03:51 PM
Golang は、さまざまなアプリケーションやサービスの開発に使用できる強力で効率的なプログラミング言語です。 Golang では、ポインタは非常に重要な概念であり、データをより柔軟かつ効率的に操作するのに役立ちます。ポインタ変換とは、異なる型間のポインタ操作のプロセスを指します。この記事では、具体的な例を使用して、Golang におけるポインタ変換のベスト プラクティスを学びます。 1. 基本概念 Golang では、各変数にはアドレスがあり、アドレスはメモリ内の変数の位置です。
