javascript - javascript 函数内的 HighCharts

Question

我试图在用户从服务器选择一些数据后绘制一个 3d 框。

当我将 highcharts 放入 js 函数中时，它会抛出一些错误。

我的代码是:

<a href="#" onclick="chart3d();">Chart It</a><br/>

<div id="container" style="height: 400px"></div>
 <script>
 var chart;

function chart3d() {

    // Give the points a 3D feel by adding a radial gradient
    Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
        return {
            radialGradient: {
                cx: 0.4,
                cy: 0.3,
                r: 0.5
            },
            stops: [
                [0, color],
                [1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
            ]
        };
    });

    // Set up the chart
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            margin: 100,
            type: 'scatter',
            options3d: {
                enabled: true,
                alpha: 10,
                beta: 30,
                depth: 250,
                viewDistance: 5,
                fitToPlot: false,
                frame: {
                    bottom: {
                        size: 1,
                        color: 'rgba(0,0,0,0.02)'
                    },
                    back: {
                        size: 1,
                        color: 'rgba(0,0,0,0.04)'
                    },
                    side: {
                        size: 1,
                        color: 'rgba(0,0,0,0.06)'
                    }
                }
            }
        },
        title: {
            text: 'Draggable box'
        },
        subtitle: {
            text: 'Click and drag the plot area to rotate in space'
        },
        plotOptions: {
            scatter: {
                width: 10,
                height: 10,
                depth: 10
            }
        },
        yAxis: {
            min: 0,
            max: 10,
            title: null
        },
        xAxis: {
            min: 0,
            max: 10,
            gridLineWidth: 1
        },
        zAxis: {
            min: 0,
            max: 10,
            showFirstLabel: false
        },
        legend: {
            enabled: false
        },
        series: [{
            planeProjection: {
                enabled: false,
            },
            lineProjection: {
                enabled: 'hover',
                colorByPoint: true
            },
            name: 'Reading',
            colorByPoint: true,
            data: darray
        }]
    });


    // Add mouse events for rotation
    $(chart.container).on('mousedown.hc touchstart.hc', function (eStart) {
        eStart = chart.pointer.normalize(eStart);

        var posX = eStart.pageX,
            posY = eStart.pageY,
            alpha = chart.options.chart.options3d.alpha,
            beta = chart.options.chart.options3d.beta,
            newAlpha,
            newBeta,
            sensitivity = 5; // lower is more sensitive

        $(document).on({
            'mousemove.hc touchdrag.hc': function (e) {
                // Run beta
                newBeta = beta + (posX - e.pageX) / sensitivity;
                chart.options.chart.options3d.beta = newBeta;

                // Run alpha
                newAlpha = alpha + (e.pageY - posY) / sensitivity;
                chart.options.chart.options3d.alpha = newAlpha;

                chart.redraw(false);
            },
            'mouseup touchend': function () {
                $(document).off('.hc');
            }
        });
    });


}

</script>

如果我不将其放入 Chart3d 函数中，则加载效果良好。有没有办法让这个工作。我收到的错误消息是:

highcharts.js:10 Uncaught Error: Highcharts error #13: www.highcharts.com/errors/13
    at Object.a.error (highcharts.js:10)
    at a.Chart.getContainer (highcharts.js:256)
    at a.Chart.firstRender (highcharts.js:271)
    at a.Chart.init (highcharts.js:247)
    at a.Chart.getArgs (highcharts.js:246)
    at new a.Chart (highcharts.js:246)
    at chart3d (graphingCustom.js:26)
    at HTMLAnchorElement.onclick (VM599 :643)

Answer 1

正如他们所说:

Highcharts Error #13

Rendering div not found

This error occurs if the chart.renderTo option is misconfigured so that Highcharts is unable to find the HTML element to render the chart in.

调用该方法时，您没有带有 id=container 的 div。