군집 분산형 차트
- Linda Hamilton원래의
- 2024-10-31 20:37:02954검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.