1

В прошлом месяце я создал несколько HTML-файлов с тепловыми картами Highcharts, файлы работали нормально, и я смог увидеть карты после открытия моих HTML-файлов в браузере. Однако сегодня я открыл свои HTML-файлы и вижу только ось и условные обозначения, данные не отображаются, хотя при наведении мыши на область карты с помощью мыши я вижу всплывающее окно. это имеет значение данных. В чем может быть проблема?

Ниже приведен HTML-код. Однако у кода не должно быть никаких проблем, потому что, как я упоминал ранее, он был протестирован месяц назад.

<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/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,7,0.0033
2013-1-1,8,0.1885
2013-1-1,9,0.2871
2013-1-1,10,0.3043
2013-1-1,11,0.2766
2013-1-1,12,0.2448
</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 doesnt 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({
    credits: {
      enabled: false
  },

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

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


        title: {
            text: '',
            align: 'left',
            x: 40
        },

        subtitle: {
            text: '',
            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, 14,16],
            tickWidth: 1,
            min: 6,
            max: 18,
            reversed: true
        },

        colorAxis: {
            stops: [
                [0, '#3060cf'],
                [0.2, '#fffbbc'],
                [0.6, '#d67d74'],
                [0.8, '#c4463a'],
                [1, '#c4463a']
            ],
            min: .2,
            max: .8,
            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>

1 ответ1

2

Я обнаружил проблему. Это было вызвано последним обновлением Highcharts до версии 5.0.0. Проблема возникает, когда я пытаюсь обернуть функцию drawPoints() файла heatmap.prototype точно в строку 55 (https://jsfiddle.net/d_paul/aja0hmh1/2/). Я изменил это с:

ctx.fillStyle = point.pointAttr[''].fill;

к

ctx.fillStyle = point.color;

Всё ещё ищете ответ? Посмотрите другие вопросы с метками .