使用 zingchart 可视化足球运动员的行走距离
在本教程中，我们将使用 zingchart 创建散点图，以可视化不同足球比赛中球员的移动距离。该图表显示了多场比赛的模拟数据，可以深入了解每分钟所经过的距离。
代码说明
此代码片段使用 javascript 生成八个游戏的虚假数据，然后使用 zingchart 配置和渲染散点图。
游戏数据：每个游戏都表示为一个独特的数据系列。随机距离：游戏中每分钟的距离都是随机的，以模拟现实世界的分布。图表配置： 图表使用 zingchart 的散点图类型、可自定义标记和轴进行设置。
下面是创建此图表的完整 html 和 javascript 代码。
代码片段
ZingSoft Demo // 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
High: %data-highs
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 infoconst origin_zoomin_level = zingchart.exec('myChart', 'getzoom');// a flag to control the viewlet 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; } }}; .zc-body { background:#000; }.chart--container { height: 100%; width: 100%; min-height: 530px;}.zc-ref { display: none;}
运行代码
将代码复制到 html 文件中并在浏览器中打开它。您应该会看到代表每场比赛的散点图，显示玩家在 90 分钟内随机行进的距离。
结论
此图表提供了一种清晰且可定制的方式来使用 zingchart 表示基于时间的数据，例如玩家动作。快乐编码！
nevolution #nabegh_anane
以上就是聚集散点图的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1494914.html
微信扫一扫 
支付宝扫一扫 
