javascript函数内部的HighCharts

javascript函数内部的HighCharts,javascript,highcharts,Javascript,Highcharts,我试图在用户从服务器中选择一些数据后绘制一个3d框 当我将highcharts放在js函数中时,它会抛出一些错误 我的代码是: <a href="#" onclick="chart3d();">Chart It</a><br/> <div id="container" style="height: 400px"></div> <script> var chart; function chart3d() {

我试图在用户从服务器中选择一些数据后绘制一个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>
正如他们所说:

高位图表错误#13

未找到呈现div

如果chart.renderTo选项配置错误,导致 Highcharts无法找到用于呈现图表的HTML元素


在调用方法时,没有带有
id=container
的div。

将代码包装在$(document).ready(函数(){…代码在这里…});如果您确定没有任何其他(如测试调用)启动chart3d函数,则可能会重复。你能回到过去,只需查看页面源代码并搜索该函数调用以确保只调用onclick吗?在fiddler中工作良好(我模仿了你的数据)
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)