ホームページ > 記事 > ウェブフロントエンド > ハイチャートを使用して水平棒グラフを作成する方法
Highcharts を使用して水平棒グラフを作成する方法 (具体的なコード例が必要です)
はじめに: Highcharts は、さまざまなタイプのグラフを作成するための非常に強力な JavaScript グラフ ライブラリです。インタラクティブなチャート。横棒グラフはデータ視覚化の一般的な形式の 1 つです。この記事では、Highcharts を使用して横棒グラフを作成する方法を紹介し、具体的なコード例を示します。
1. 準備
<!DOCTYPE html> <html> <head> <script src="https://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="chartContainer"></div> </body> </html>
var data = [ { name: 'A', value: 10 }, { name: 'B', value: 20 }, { name: 'C', value: 30 }, { name: 'D', value: 40 } ];
Highcharts の
chart 関数を使用してグラフ オブジェクトを作成し、いくつかの基本的な構成オプションを設定します。以下はサンプル コードです: Highcharts.chart('chartContainer', { chart: { type: 'bar' }, title: { text: '水平条形图' }, xAxis: { title: { text: '值' } }, yAxis: { title: { text: '名称' } }, series: [{ data: data }] });
列バーの色:
colorseries: [{ data: data, color: '#FF0000' // 设置柱状条的颜色为红色 }]
棒グラフのタイトル:
title.texttitle: { text: '销售数据' }
軸ラベルのスタイル:
xAxis.labels プロパティと
yAxis.labelsxAxis: { labels: { style: { fontSize: '12px' // 设置 x 轴标签的字体大小为 12px } } }, yAxis: { labels: { style: { fontWeight: 'bold' // 设置 y 轴标签的字体加粗 } } }
以上がハイチャートを使用して水平棒グラフを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。