How to use Heatmap Animation Example? #355

momolly1024 · 2022-11-24T03:26:48Z

I saw the code below the Heatmap Animation Example
.

But How can I use the example?
I try to add the code in html but ut not work.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Legend Example (DOM Legends) | heatmap.js</title>
        <style>
            body,
            html,
            h2 {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            body {
                font-family: sans-serif;
            }
            body * {
                font-weight: 200;
            }
            #heatmapContainerWrapper {
                width: 100%;
                height: 100%;
                position: absolute;
                background: rgba(0, 0, 0, 0.1);
            }
            #heatmapContainer {
                width: 100%;
                height: 100%;
            }
            #heatmapLegend {
                background: white;
                position: absolute;
                bottom: 0;
                right: 0;
                padding: 10px;
            }
            #min {
                float: left;
            }
            #max {
                float: right;
            }
            h1 {
                position: absolute;
                background: black;
                color: white;
                padding: 10px;
                font-weight: 200;
            }
            #all-examples-info {
                position: absolute;
                background: white;
                font-size: 16px;
                padding: 20px;
                top: 100px;
                width: 350px;
                line-height: 150%;
                border: 1px solid rgba(0, 0, 0, 0.2);
            }
        </style>
    </head>
    <body>
        <div class="timeline-wrapper"></div>
        <div class="heatmap"></div>

        <script src="/build/heatmap.js"></script>
        <script>
            window.onload = function () {
                // creating a class to wrap the heatmap cycling logic
                function AnimationPlayer(options) {
                    this.heatmap = options.heatmap
                    this.data = options.data
                    this.interval = null
                    this.animationSpeed = options.animationSpeed || 300
                    this.wrapperEl = options.wrapperEl
                    this.isPlaying = false
                    this.init()
                }
                // define the prototype functions
                AnimationPlayer.prototype = {
                    init: function () {
                        var dataLen = this.data.length
                        this.wrapperEl.innerHTML = ''
                        var playButton = (this.playButton =
                            document.createElement('button'))
                        playButton.onclick = function () {
                            if (this.isPlaying) {
                                this.stop()
                            } else {
                                this.play()
                            }
                            this.isPlaying = !this.isPlaying
                        }.bind(this)
                        playButton.innerText = 'play'

                        this.wrapperEl.appendChild(playButton)

                        var events = document.createElement('div')
                        events.className = 'heatmap-timeline'
                        events.innerHTML = ''

                        for (var i = 0; i < dataLen; i++) {
                            var xOffset = (100 / (dataLen - 1)) * i

                            var ev = document.createElement('div')
                            ev.className = 'time-point'
                            ev.style.left = xOffset + '%'

                            ev.onclick = function (i) {
                                return function () {
                                    this.isPlaying = false
                                    this.stop()
                                    this.setFrame(i)
                                }.bind(this)
                            }.bind(this)(i)

                            events.appendChild(ev)
                        }
                        this.wrapperEl.appendChild(events)
                        this.setFrame(0)
                    },
                    play: function () {
                        var dataLen = this.data.length
                        this.playButton.innerText = 'pause'
                        this.interval = setInterval(
                            function () {
                                this.setFrame(++this.currentFrame % dataLen)
                            }.bind(this),
                            this.animationSpeed
                        )
                    },
                    stop: function () {
                        clearInterval(this.interval)
                        this.playButton.innerText = 'play'
                    },
                    setFrame: function (frame) {
                        this.currentFrame = frame
                        var snapshot = this.data[frame]
                        this.heatmap.setData(snapshot)
                        var timePoints = $('.heatmap-timeline .time-point')
                        for (var i = 0; i < timePoints.length; i++) {
                            timePoints[i].classList.remove('active')
                        }
                        timePoints[frame].classList.add('active')
                    },
                    setAnimationData: function (data) {
                        this.isPlaying = false
                        this.stop()
                        this.data = data
                        this.init()
                    },
                    setAnimationSpeed: function (speed) {
                        this.isPlaying = false
                        this.stop()
                        this.animationSpeed = speed
                    },
                }

                var heatmapInstance = h337.create({
                    container: document.querySelector('.heatmap'),
                })

                // animationData contains an array of heatmap data objects
                var animationData = []

                // generate some heatmap data objects
                for (var i = 0; i < 20; i++) {
                    animationData.push(generateRandomData(300))
                }

                var player = new AnimationPlayer({
                    heatmap: heatmapInstance,
                    wrapperEl: document.querySelector('.timeline-wrapper'),
                    data: animationData,
                    animationSpeed: 100,
                })
            }
        </script>
    </body>
</html>

Thank you.

Ssssssunny · 2022-12-07T02:51:00Z

https://blog.csdn.net/cungudafa/article/details/102869566

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use Heatmap Animation Example? #355

How to use Heatmap Animation Example? #355

momolly1024 commented Nov 24, 2022

Ssssssunny commented Dec 7, 2022

How to use Heatmap Animation Example? #355

How to use Heatmap Animation Example? #355

Comments

momolly1024 commented Nov 24, 2022

Ssssssunny commented Dec 7, 2022