当前位置：首页 > 文章列表 > 文章 > 前端 > 聚集散点图

聚集散点图

来源：dev.to 2024-11-12 18:33:42 0浏览收藏

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《聚集散点图》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

聚集散点图

使用 zingchart 可视化足球运动员的行走距离

在本教程中，我们将使用 zingchart 创建散点图，以可视化不同足球比赛中球员的移动距离。该图表显示了多场比赛的模拟数据，可以深入了解每分钟所经过的距离。

代码说明

此代码片段使用 javascript 生成八个游戏的虚假数据，然后使用 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>