个人中心
gpt4 book ai didi

javascript - 如何让 Highchart 出现在 HTML 页面中？

转载 作者：行者123 更新时间：2023-11-30 15:52:17 25 4
gpt4 key购买 nike

我写了一个 python 代码来从一些文本文件中提取数据，然后将数据与一些 html 代码一起写入，然后将它们保存到 .html 文件中。每个文件都应该生成一个 Highchart 扩展热图。当我打开生成的文件时，它们不起作用，我看到一个空白的 html 页面。但是，当我将我的 html 代码复制并粘贴到 jsFiddle 中时，我能够获得完整的工作图表吗？我是 HTML 新手!这是我目前所拥有的(由于帖子限制，大部分实际数据已被删除)

<!DOCTYPE html>
<html>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>



<div id="container" style="height: 320px; width: 1000px; margin: 0 auto"></div>

<!-- Source: http://vikjavev.no/ver/highcharts-demos/heatmap.csv.php?year=2013 -->
<pre id="csv" style="display: none">Date,Time,Temperature
2013-1-1,6,0.0033
2013-1-1,7,0.0033
2013-1-1,8,0.1999
2013-1-1,9,0.3319
2013-1-1,10,0.3881
2013-1-1,11,0.3845
2013-1-1,12,0.3393
2013-1-1,13,0.2786
2013-1-1,14,0.2671
2013-1-1,15,0.2813
2013-1-1,16,0.2658
2013-1-1,17,0.2186
2013-1-1,18,0.0033
2013-1-2,6,0.0033
2013-1-2,7,0.0033
2013-1-2,8,0.1946
2013-1-2,9,0.2907
2013-1-2,10,0.3349
2013-1-2,11,0.3550
2013-1-2,12,0.3453
2013-1-2,13,0.3256
2013-1-2,14,0.3021
2013-1-2,15,0.2885
2013-1-2,16,0.2645
2013-1-2,17,0.2096
2013-1-2,18,0.0033
2013-1-3,6,0.0033
2013-1-3,7,0.0033
2013-1-3,8,0.1930
2013-1-3,9,0.2193
2013-1-3,10,0.2987
2013-1-3,11,0.3786
2013-1-3,12,0.3533
2013-1-3,13,0.3542
2013-1-3,14,0.3389
2013-1-3,15,0.3037
2013-1-3,16,0.2876
2013-1-3,17,0.2310
2013-1-3,18,0.0033
2013-1-4,6,0.0033
2013-1-4,7,0.0033
2013-1-4,8,0.2098
2013-1-4,9,0.2602
2013-1-4,10,0.3613
2013-1-4,11,0.4041
2013-1-4,12,0.3540
2013-1-4,13,0.3139
2013-1-4,14,0.2810
2013-1-4,15,0.2547
2013-1-4,16,0.2511
2013-1-4,17,0.2185
2013-1-4,18,0.1818
2013-1-5,6,0.0033
2013-1-5,7,0.0033
2013-1-5,8,0.2135
2013-1-5,9,0.3367
2013-1-5,10,0.3959
2013-1-5,11,0.3862
2013-1-5,12,0.3196
2013-1-5,13,0.2738
2013-1-5,14,0.2613
2013-1-5,15,0.2586
2013-1-5,16,0.2539
2013-1-5,17,0.2191
2013-1-5,18,0.1836
2013-1-6,6,0.0033
2013-1-6,7,0.0033
2013-1-6,8,0.2059
2013-1-6,9,0.2252
2013-1-6,10,0.2858
2013-1-6,11,0.3271
2013-1-6,12,0.3339
2013-1-6,13,0.3275
2013-1-6,14,0.2996
2013-1-6,15,0.2997
2013-1-6,16,0.2613
2013-1-6,17,0.2494
2013-1-6,18,0.0480
2013-1-7,6,0.0033
2013-1-7,7,0.0033
2013-1-7,8,0.0462
2013-1-7,9,0.2475
2013-1-7,10,0.2820
2013-1-7,11,0.3236
2013-1-7,12,0.3425
2013-1-7,13,0.3598
2013-1-7,14,0.3103
2013-1-7,15,0.2893
2013-1-7,16,0.2566
2013-1-7,17,0.2344
2013-1-7,18,0.0988
2013-1-8,6,0.0033
2013-1-8,7,0.0033
2013-1-8,8,0.1704
2013-1-8,9,0.2533
2013-1-8,10,0.3186
2013-1-8,11,0.3332
2013-1-8,12,0.3660
2013-1-8,13,0.3613
2013-1-8,14,0.3664
2013-1-8,15,0.3386
2013-1-8,16,0.3091
2013-1-8,17,0.2736
2013-1-8,18,0.0988
</pre>

                <script>
                $(function () {

    /**
     * This plugin extends Highcharts in two ways:
     * - Use HTML5 canvas instead of SVG for rendering of the heatmap squares. Canvas
     *   outperforms SVG when it comes to thousands of single shapes.
     * - Add a K-D-tree to find the nearest point on mouse move. Since we no longer have SVG shapes
     *   to capture mouseovers, we need another way of detecting hover points for the tooltip.
     */
    (function (H) {
        var Series = H.Series,
            each = H.each;

        /**
         * Create a hidden canvas to draw the graph on. The contents is later copied over
         * to an SVG image element.
         */
        Series.prototype.getContext = function () {
            if (!this.canvas) {
                this.canvas = document.createElement('canvas');
                this.canvas.setAttribute('width', this.chart.chartWidth);
                this.canvas.setAttribute('height', this.chart.chartHeight);
                this.image = this.chart.renderer.image('', 0, 0, this.chart.chartWidth, this.chart.chartHeight).add(this.group);
                this.ctx = this.canvas.getContext('2d');
            }
            return this.ctx;
        };

        /**
         * Draw the canvas image inside an SVG image
         */
        Series.prototype.canvasToSVG = function () {
            this.image.attr({ href: this.canvas.toDataURL('image/png') });
        };

        /**
         * Wrap the drawPoints method to draw the points in canvas instead of the slower SVG,
         * that requires one shape each point.
         */
        H.wrap(H.seriesTypes.heatmap.prototype, 'drawPoints', function () {

            var ctx = this.getContext();

            if (ctx) {

                // draw the columns
                each(this.points, function (point) {
                    var plotY = point.plotY,
                        shapeArgs;

                    if (plotY !== undefined && !isNaN(plotY) && point.y !== null) {
                        shapeArgs = point.shapeArgs;

                        ctx.fillStyle = point.pointAttr[''].fill;
                        ctx.fillRect(shapeArgs.x, shapeArgs.y, shapeArgs.width, shapeArgs.height);
                    }
                });

                this.canvasToSVG();

            } else {
                this.chart.showLoading('Your browser doesn't support HTML5 canvas, <br>please use a modern browser');

                // Uncomment this to provide low-level (slow) support in oldIE. It will cause script errors on
                // charts with more than a few thousand points.
                // arguments[0].call(this);
            }
        });
        H.seriesTypes.heatmap.prototype.directTouch = false; // Use k-d-tree
    }(Highcharts));


    var start;
    $('#container').highcharts({

        data: {
            csv: document.getElementById('csv').innerHTML,
            parsed: function () {
                start = +new Date();
            }
        },

        chart: {
            type: 'heatmap',
            margin: [60, 10, 80, 50]
        },


        title: {
            text: 'Highcharts extended heat map',
            align: 'left',
            x: 40
        },

        subtitle: {
            text: 'Temperature variation by day and hour through 2013',
            align: 'left',
            x: 40
        },

        xAxis: {
            type: 'datetime',
            min: Date.UTC(2013, 0, 1),
            max: Date.UTC(2014, 0, 1),
            labels: {
                align: 'left',
                x: 5,
                y: 14,
                format: '{value:%B}' // long month
            },
            showLastLabel: false,
            tickLength: 16
        },

        yAxis: {
            title: {
                text: null
            },
            labels: {
                format: '{value}:00'
            },
            minPadding: 0,
            maxPadding: 0,
            startOnTick: false,
            endOnTick: false,
            tickPositions: [6, 8, 10, 12, 16],
            tickWidth: 1,
            min: 6,
            max: 18,
            reversed: true
        },

        colorAxis: {
            stops: [
                [0, '#3060cf'],
                [0.5, '#fffbbc'],
                [0.9, '#c4463a'],
                [1, '#c4463a']
            ],
            min: 0,
            max: 1,
            startOnTick: false,
            endOnTick: false,
            labels: {
                format: '{value}?'
            }
        },

        series: [{
            borderWidth: 0,
            nullColor: '#EFEFEF',
            colsize: 24 * 36e5, // one day
            tooltip: {
                headerFormat: 'Temperature<br/>',
                pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ?</b>'
            },
            turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
        }]

    });
    console.log('Rendered in ' + (new Date() - start) + ' ms'); // eslint-disable-line no-console

});

</script>
</body>
</html>

最佳答案

我在您的代码段中发现了以下错误:

{
    "message": "Uncaught SyntaxError: missing ) after argument list",
    "filename": "http://stacksnippets.net/js",
    "lineno": 196,
    "colno": 40
}

事实证明，在第 186 行中，单词“doesn't”中有一个未转义的单引号。你有:

this.chart.showLoading('Your browser doesn't support HTML5 canvas, <br>please use a modern browser');

应该是:

this.chart.showLoading('Your browser doesn\'t support HTML5 canvas, <br>please use a modern browser');

当我进行此修复时，我能够显示热图(请参阅下面更新的代码段)。

这是否解决了您的问题？

<!DOCTYPE html>
<html>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>



<div id="container" style="height: 320px; width: 1000px; margin: 0 auto"></div>

<!-- Source: http://vikjavev.no/ver/highcharts-demos/heatmap.csv.php?year=2013 -->
<pre id="csv" style="display: none">Date,Time,Temperature
2013-1-1,6,0.0033
2013-1-1,7,0.0033
2013-1-1,8,0.1999
2013-1-1,9,0.3319
2013-1-1,10,0.3881
2013-1-1,11,0.3845
2013-1-1,12,0.3393
2013-1-1,13,0.2786
2013-1-1,14,0.2671
2013-1-1,15,0.2813
2013-1-1,16,0.2658
2013-1-1,17,0.2186
2013-1-1,18,0.0033
2013-1-2,6,0.0033
2013-1-2,7,0.0033
2013-1-2,8,0.1946
2013-1-2,9,0.2907
2013-1-2,10,0.3349
2013-1-2,11,0.3550
2013-1-2,12,0.3453
2013-1-2,13,0.3256
2013-1-2,14,0.3021
2013-1-2,15,0.2885
2013-1-2,16,0.2645
2013-1-2,17,0.2096
2013-1-2,18,0.0033
2013-1-3,6,0.0033
2013-1-3,7,0.0033
2013-1-3,8,0.1930
2013-1-3,9,0.2193
2013-1-3,10,0.2987
2013-1-3,11,0.3786
2013-1-3,12,0.3533
2013-1-3,13,0.3542
2013-1-3,14,0.3389
2013-1-3,15,0.3037
2013-1-3,16,0.2876
2013-1-3,17,0.2310
2013-1-3,18,0.0033
2013-1-4,6,0.0033
2013-1-4,7,0.0033
2013-1-4,8,0.2098
2013-1-4,9,0.2602
2013-1-4,10,0.3613
2013-1-4,11,0.4041
2013-1-4,12,0.3540
2013-1-4,13,0.3139
2013-1-4,14,0.2810
2013-1-4,15,0.2547
2013-1-4,16,0.2511
2013-1-4,17,0.2185
2013-1-4,18,0.1818
2013-1-5,6,0.0033
2013-1-5,7,0.0033
2013-1-5,8,0.2135
2013-1-5,9,0.3367
2013-1-5,10,0.3959
2013-1-5,11,0.3862
2013-1-5,12,0.3196
2013-1-5,13,0.2738
2013-1-5,14,0.2613
2013-1-5,15,0.2586
2013-1-5,16,0.2539
2013-1-5,17,0.2191
2013-1-5,18,0.1836
2013-1-6,6,0.0033
2013-1-6,7,0.0033
2013-1-6,8,0.2059
2013-1-6,9,0.2252
2013-1-6,10,0.2858
2013-1-6,11,0.3271
2013-1-6,12,0.3339
2013-1-6,13,0.3275
2013-1-6,14,0.2996
2013-1-6,15,0.2997
2013-1-6,16,0.2613
2013-1-6,17,0.2494
2013-1-6,18,0.0480
2013-1-7,6,0.0033
2013-1-7,7,0.0033
2013-1-7,8,0.0462
2013-1-7,9,0.2475
2013-1-7,10,0.2820
2013-1-7,11,0.3236
2013-1-7,12,0.3425
2013-1-7,13,0.3598
2013-1-7,14,0.3103
2013-1-7,15,0.2893
2013-1-7,16,0.2566
2013-1-7,17,0.2344
2013-1-7,18,0.0988
2013-1-8,6,0.0033
2013-1-8,7,0.0033
2013-1-8,8,0.1704
2013-1-8,9,0.2533
2013-1-8,10,0.3186
2013-1-8,11,0.3332
2013-1-8,12,0.3660
2013-1-8,13,0.3613
2013-1-8,14,0.3664
2013-1-8,15,0.3386
2013-1-8,16,0.3091
2013-1-8,17,0.2736
2013-1-8,18,0.0988
</pre>

                <script>
                $(function () {

    /**
     * This plugin extends Highcharts in two ways:
     * - Use HTML5 canvas instead of SVG for rendering of the heatmap squares. Canvas
     *   outperforms SVG when it comes to thousands of single shapes.
     * - Add a K-D-tree to find the nearest point on mouse move. Since we no longer have SVG shapes
     *   to capture mouseovers, we need another way of detecting hover points for the tooltip.
     */
    (function (H) {
        var Series = H.Series,
            each = H.each;

        /**
         * Create a hidden canvas to draw the graph on. The contents is later copied over
         * to an SVG image element.
         */
        Series.prototype.getContext = function () {
            if (!this.canvas) {
                this.canvas = document.createElement('canvas');
                this.canvas.setAttribute('width', this.chart.chartWidth);
                this.canvas.setAttribute('height', this.chart.chartHeight);
                this.image = this.chart.renderer.image('', 0, 0, this.chart.chartWidth, this.chart.chartHeight).add(this.group);
                this.ctx = this.canvas.getContext('2d');
            }
            return this.ctx;
        };

        /**
         * Draw the canvas image inside an SVG image
         */
        Series.prototype.canvasToSVG = function () {
            this.image.attr({ href: this.canvas.toDataURL('image/png') });
        };

        /**
         * Wrap the drawPoints method to draw the points in canvas instead of the slower SVG,
         * that requires one shape each point.
         */
        H.wrap(H.seriesTypes.heatmap.prototype, 'drawPoints', function () {

            var ctx = this.getContext();

            if (ctx) {

                // draw the columns
                each(this.points, function (point) {
                    var plotY = point.plotY,
                        shapeArgs;

                    if (plotY !== undefined && !isNaN(plotY) && point.y !== null) {
                        shapeArgs = point.shapeArgs;

                        ctx.fillStyle = point.pointAttr[''].fill;
                        ctx.fillRect(shapeArgs.x, shapeArgs.y, shapeArgs.width, shapeArgs.height);
                    }
                });

                this.canvasToSVG();

            } else {
                this.chart.showLoading('Your browser doesn\'t support HTML5 canvas, <br>please use a modern browser');

                // Uncomment this to provide low-level (slow) support in oldIE. It will cause script errors on
                // charts with more than a few thousand points.
                // arguments[0].call(this);
            }
        });
        H.seriesTypes.heatmap.prototype.directTouch = false; // Use k-d-tree
    }(Highcharts));


    var start;
    $('#container').highcharts({

        data: {
            csv: document.getElementById('csv').innerHTML,
            parsed: function () {
                start = +new Date();
            }
        },

        chart: {
            type: 'heatmap',
            margin: [60, 10, 80, 50]
        },


        title: {
            text: 'Highcharts extended heat map',
            align: 'left',
            x: 40
        },

        subtitle: {
            text: 'Temperature variation by day and hour through 2013',
            align: 'left',
            x: 40
        },

        xAxis: {
            type: 'datetime',
            min: Date.UTC(2013, 0, 1),
            max: Date.UTC(2014, 0, 1),
            labels: {
                align: 'left',
                x: 5,
                y: 14,
                format: '{value:%B}' // long month
            },
            showLastLabel: false,
            tickLength: 16
        },

        yAxis: {
            title: {
                text: null
            },
            labels: {
                format: '{value}:00'
            },
            minPadding: 0,
            maxPadding: 0,
            startOnTick: false,
            endOnTick: false,
            tickPositions: [6, 8, 10, 12, 16],
            tickWidth: 1,
            min: 6,
            max: 18,
            reversed: true
        },

        colorAxis: {
            stops: [
                [0, '#3060cf'],
                [0.5, '#fffbbc'],
                [0.9, '#c4463a'],
                [1, '#c4463a']
            ],
            min: 0,
            max: 1,
            startOnTick: false,
            endOnTick: false,
            labels: {
                format: '{value}?'
            }
        },

        series: [{
            borderWidth: 0,
            nullColor: '#EFEFEF',
            colsize: 24 * 36e5, // one day
            tooltip: {
                headerFormat: 'Temperature<br/>',
                pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ?</b>'
            },
            turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
        }]

    });
    console.log('Rendered in ' + (new Date() - start) + ' ms'); // eslint-disable-line no-console

});

</script>
</body>
</html>

关于javascript - 如何让 Highchart 出现在 HTML 页面中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39137438/

25 4 0
文章推荐： javascript - 使用Jquery在右键单击时停止垂直滚动
文章推荐： c - 汇编语言中 .long function_name 的含义
文章推荐： C 查找作为参数传递的列表的最后一个元素
文章推荐： javascript - JavaScript 中的多态性示例使用错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com