ホームページ > 記事 > ウェブフロントエンド > 集合散布図
集合散布図
- Linda Hamiltonオリジナル
- 2024-10-31 20:37:02886ブラウズ
ZingChart を使用してサッカー選手の移動距離を視覚化
このチュートリアルでは、ZingChart を使用して散布図を作成し、さまざまなフットボールの試合での選手の移動距離を視覚化します。グラフには複数のゲームにわたるシミュレートされたデータが表示され、分ごとに移動した距離についての洞察が得られます。
コードの説明
このコード スニペットは、JavaScript を使用して 8 つのゲームの偽のデータを生成し、ZingChart を使用して散布図を構成してレンダリングします。
- ゲーム データ: 各ゲームは固有のデータ シリーズとして表されます。
- ランダム化された距離: ゲーム内の各分の距離は、現実世界の分布を模倣するためにランダム化されます。
- グラフの構成: グラフは、ZingChart の散布図タイプ、カスタマイズ可能なマーカー、および軸を使用して設定されます。
以下は、このグラフを作成するための完全な HTML および JavaScript コードです。
コードのスニペット
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script>
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'hbar',
theme: 'dark',
title: {
text: 'Average Temperatures',
marginLeft: '20px',
},
legend: {
align: 'left',
backgroundColor: 'none',
borderWidth: '0px',
item: {
cursor: 'hand',
fontColor: '#E3E3E5',
},
marker: {
type: 'circle',
borderWidth: '0px',
cursor: 'hand',
},
offsetY: '25px',
verticalAlign: 'top',
},
plot: {
tooltip: {
text: '%data-city<br>High: %data-highs<br>Low: %data-lows',
},
},
plotarea: {
margin: '120px 50px 60px 85px',
},
scaleX: {
label: {
text: '2020',
fontSize: '14px',
},
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
zooming: true,
zoomTo: [0, 5],
},
scaleY: {
format: '%v°F',
guide: {
lineStyle: 'solid',
},
label: {
text: 'Temperature',
fontSize: '14px',
},
},
shapes: [
{
type: 'rectangle',
id: 'view_all',
backgroundColor: '#5e5e5e',
borderColor: '#E3E3E5',
borderRadius: '3px',
borderWidth: '1px',
cursor: 'hand',
height: '20px',
label: {
text: 'View All',
bold: true,
fontColor: '#E3E3E5',
fontSize: '12px',
},
width: '75px',
x: '89%',
y: '7%',
},
],
series: [
{
text: 'New Orleans Average Temps 2020',
values: [17, 17, 19, 18, 17, 15, 16, 16, 15, 17, 19, 17],
dataCity: 'New Orleans',
dataHighs: [62, 65, 72, 78, 85, 89, 91, 91, 87, 80, 72, 64],
dataLows: [45, 48, 53, 60, 68, 74, 75, 75, 72, 63, 53, 47],
offsetValues: [45, 48, 53, 60, 68, 74, 75, 75, 72, 63, 53, 47],
},
{
text: 'San Diego Average Temps 2020',
values: [16, 14, 13, 11, 10, 9, 10, 9, 9, 12, 15, 17],
dataCity: 'San Diego',
dataHighs: [65, 65, 66, 67, 69, 71, 75, 76, 76, 73, 69, 65],
dataLows: [49, 51, 53, 56, 59, 62, 65, 67, 65, 61, 54, 48],
offsetValues: [49, 51, 53, 56, 59, 62, 65, 67, 65, 61, 54, 48],
},
{
text: 'Denver Average Temps 2020',
values: [27, 27, 27, 27, 29, 30, 31, 31, 31, 29, 27, 27],
dataCity: 'Denver',
dataHighs: [45, 46, 54, 61, 72, 82, 90, 88, 79, 66, 52, 45],
dataLows: [18, 19, 27, 34, 43, 52, 59, 57, 48, 37, 25, 18],
offsetValues: [18, 19, 27, 34, 43, 52, 59, 57, 48, 37, 25, 18],
},
],
scrollX: {},
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
// EVENTS
// -----------------------------
// store the original zoom level info
const origin_zoomin_level = zingchart.exec('myChart', 'getzoom');
// a flag to control the view
let switch_view = 'viewall';
zingchart.shape_click = (p) => {
if (p.shapeid == 'view_all') {
switch (switch_view) {
case 'viewall':
// change zoom level to viewall
zingchart.exec(p.id, 'viewall');
// update the switch button text label
// to Previous View
zingchart.exec(p.id, 'updateobject', {
type: 'shape',
data: {
id: 'view_all',
label: {
text: 'Original View',
},
width: '110px',
}
});
// set the flag to previous_view
switch_view = 'original_view';
break;
case 'original_view':
// scale-x and scale-y are array from
// origina_zoomin_level object
let scale_x = origin_zoomin_level['scale-x'];
let scale_y = origin_zoomin_level['scale-y'];
// use zoomtovalues to get back to original zoom
// level, pass attributes from origin_zoomin_level
// object xmin, xmax, ymin, ymax as parameter
zingchart.exec(p.id, 'zoomtovalues', {
graphid: 0,
xmin: scale_x.xmin,
xmax: scale_x.xmax,
ymin: scale_y.ymin,
ymax: scale_y.ymax
});
// update the switch button text label
// to View All
zingchart.exec(p.id, 'updateobject', {
type: 'shape',
data: {
id: 'view_all',
label: {
text: 'View All',
},
width: '75px',
}
});
// change the flag back to viewall
switch_view = 'viewall';
break;
}
}
};
</script>
<style>
.zc-body { background:#000; }
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
</body>
</html>
コードの実行
- コードを HTML ファイルにコピーし、ブラウザで開きます。
- 各ゲームを表す散布図が表示され、90 分間にプレイヤーが移動したランダムな距離が表示されます。
結論
このチャートは、プレーヤーの動きなどの時間ベースのデータを ZingChart で表現する明確でカスタマイズ可能な方法を提供します。コーディングを楽しんでください!
NEvolution #nabegh_anane
以上が集合散布図の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。