使用 zingchart 可视化足球运动员的行走距离
在本教程中，我们将使用 zingchart 创建散点图，以可视化不同足球比赛中球员的移动距离。该图表显示了多场比赛的模拟数据，可以深入了解每分钟所经过的距离。
代码说明
此代码片段使用 JavaScript 生成八个游戏的虚假数据，然后使用 zingchart 配置和渲染散点图。
- 游戏数据：每个游戏都表示为一个独特的数据系列。
- 随机距离：游戏中每分钟的距离都是随机的，以模拟现实世界的分布。
- 图表配置： 图表使用 zingchart 的散点图类型、可自定义标记和轴进行设置。
下面是创建此图表的完整 html 和 javascript 代码。
代码片段
<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> <div id="myChart" class="chart--container"> <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a> </div>
登录后复制
运行代码
- 将代码复制到 html 文件中并在浏览器中打开它。
- 您应该会看到代表每场比赛的散点图，显示玩家在 90 分钟内随机行进的距离。
结论
此图表提供了一种清晰且可定制的方式来使用 zingchart 表示基于时间的数据，例如玩家动作。快乐编码！
nevolution #nabegh_anane
© 版权声明
文章版权归作者所有，未经允许请勿转载。
【小浪云服务商 - 服务器12元起 - 挂机宝5元起】
THE END
暂无评论内容