군집 분산형 차트

ZingChart를 사용하여 축구 선수의 이동 거리 시각화

이 튜토리얼에서는 ZingChart를 사용하여 산점도를 만들어 다양한 축구 경기에서 선수들이 이동한 거리를 시각화합니다. 차트에는 여러 게임에 대한 시뮬레이션 데이터가 표시되어 분 단위로 이동한 거리에 대한 통찰력을 제공합니다.

코드 설명

이 코드 조각은 JavaScript를 사용하여 8개 게임에 대한 가짜 데이터를 생성한 다음 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>

  

코드 실행

1. 코드를 HTML 파일에 복사하고 브라우저에서 엽니다.
2. 각 게임이 표시된 분산형 차트가 표시되어 플레이어가 90분 동안 이동한 임의의 거리를 보여줍니다.

결론

이 차트는 ZingChart를 사용하여 플레이어 움직임과 같은 시간 기반 데이터를 나타내는 명확하고 사용자 정의 가능한 방법을 제공합니다. 즐거운 코딩하세요!

NEvolution #nabegh_anane

위 내용은 군집 분산형 차트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!