ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryの不均等スケールチャートについて話しましょう
jqueryの不均等スケールチャートについて話しましょう
- PHPzオリジナル
- 2023-04-06 08:54:49548ブラウズ
jQuery は広く使用されている JavaScript ライブラリであり、動的な Web ページの効果と対話性を実現するための便利で高速なメソッドと関数を多数提供します。データ視覚化の観点からは、jQuery には関連するプラグインやツールも多数あり、その 1 つが不均一スケール チャートです。
不均等なスケール グラフは、横軸上のデータ ポイント間の距離が固定されておらず、特定の比率または規則に従って分布していることを意味します。この種類のグラフは通常、時系列データまたはさまざまな属性を持つデータ ポイントを表示して、データ ポイント間の関係をより明確に示すために使用されます。
不均一な縮尺グラフを実装する場合、jQuery には便利で使いやすいプラグインがいくつか用意されています。より一般的に使用されるのは、D3.js と Highcharts です。以下では、これら 2 つのプラグインの使用方法を紹介します。
まずは D3.js です。 D3.js は、DOM ドキュメントを操作することでデータの視覚化効果を実現するデータ駆動型 JavaScript ライブラリです。 D3.js を使用して不均一なスケールのグラフを実装する場合、スケールと軸を定義することでこれを実現できます。スケールはデータを水平軸上のピクセル位置にマッピングするために使用され、軸は水平軸上に目盛りとラベルを描画するために使用されます。
次は、D3.js を使用して不均一なスケールの折れ線グラフを実装する方法を示す簡単な例です:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js刻度不均匀图表</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<svg width="960" height="500"></svg>
<script>
// 数据
var data = [
{x: 1, y: 10},
{x: 2, y: 20},
{x: 4, y: 30},
{x: 7, y: 40},
{x: 10, y: 50},
{x: 15, y: 60},
{x: 23, y: 70},
{x: 30, y: 80},
{x: 40, y: 90},
{x: 50, y: 100}
];
// 定义比例尺和轴
var xScale = d3.scaleLinear()
.domain([1, 50])
.range([0, 960]);
var xAxis = d3.axisBottom(xScale)
.ticks(10)
.tickValues([1, 2, 4, 7, 10, 15, 23, 30, 40, 50]);
// 绘制折线图
var svg = d3.select("svg");
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2)
.attr("d", d3.line()
.x(function(d) { return xScale(d.x); })
.y(function(d) { return d.y; })
);
// 绘制坐标轴
svg.append("g")
.attr("transform", "translate(0, 400)")
.call(xAxis);
</script>
</body>
</html>
この例では、10 個のデータ ポイントを含む折れ線グラフを定義します。データセットデータ。スケールと軸を定義することにより、データ ポイント間の間隔が水平軸全体にわたって不均一に広がります。折れ線グラフを描画するときは、D3.js が提供する .line() 関数を使用して、データ セットを SVG パスにマッピングしました。最後に、横軸を描画し、スケールとラベルを設定します。
次の紹介はHighchartsです。 Highcharts は、複数のタイプのグラフ、対話性、動的な効果を提供する、フル機能の JavaScript グラフ作成ライブラリです。
ハイチャートで不均一なスケール チャートを実装することも非常に簡単です。以下に示すように、X 軸のカテゴリ属性を設定することで、各データ ポイントに対応する水平軸座標を定義できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Highcharts刻度不均匀图表</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container"></div>
<script>
// 数据
var data = [
{name: '1', y: 10},
{name: '2', y: 20},
{name: '4', y: 30},
{name: '7', y: 40},
{name: '10', y: 50},
{name: '15', y: 60},
{name: '23', y: 70},
{name: '30', y: 80},
{name: '40', y: 90},
{name: '50', y: 100}
];
// 绘制图表
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Highcharts刻度不均匀图表'
},
xAxis: {
categories: ['1', '2', '4', '7', '10', '15', '23', '30', '40', '50']
},
yAxis: {
title: {
text: 'Y轴标题'
}
},
series: [{
name: '数据点',
data: data
}]
});
</script>
</body>
</html>
この例では、10 個のデータ ポイント データを含むデータ セットも使用します。チャートを描画するときに、x 軸のカテゴリ属性を指定し、各データ ポイントに対応する横軸の座標を設定することで、不均一なスケールの効果を実現しました。
上記の 2 つのプラグインに加えて、不等尺度グラフの実装に使用できる他にも多くの jQuery ライブラリとプラグインがあります。どのアプローチを取るかに関係なく、特定のデータの種類とニーズに基づいて選択する必要があります。通常のグラフと比較して、不等尺度グラフはデータ ポイント間の関係をより直観的に表現できるため、ユーザーがデータをよりよく理解して分析できるようになります。
以上がjqueryの不均等スケールチャートについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。