Question

我正在尝试实施此图表http://jsfiddle.net/y80jchon/，该图表是Highcharts＆＃39;之一的一部分。插件（http://www.highcharts.com/plugin-registry/single/35/contour）但是还没有。

我从jsfiddle获取了JavaScript代码，HTML和CSS，压缩了它，并在浏览器中呈现它，没有任何结果。在HTML中有一个注释掉的部分，其中说：

<!--
   Keep in mind that 3-D contours won't work with the master branch of Highcharts yet

   <script src="http://code.highcharts.com/highcharts.js"></script>
   <script src="http://code.highcharts.com/highcharts-3d.js"></script>
   <script src="http://code.highcharts.com/modules/heatmap.js"></script>
-->

我不确定我是否理解这是否与它不呈现这一事实有关。

有人能发现我做错了吗？

先谢谢你们！

编辑：

正如您在插件中所看到的，它列出了highcharts 4.0.4，highcharts-heatmap 4.0.4和delaunay 1.0.0作为依赖项。我已经把它们包括在内了

这就是我在.html中整合jsfiddle代码的方式：

<!--
Keep in mind that 3-D contours won't work with the master branch of Highcharts yet

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
-->
<head>
     <script src="https://rawgithub.com/paulo-raca/highcharts.com/axis-fixes/js/highcharts.src.js"></script>
     <script src="https://rawgithub.com/paulo-raca/highcharts.com/axis-fixes/js/highcharts-3d.src.js"></script>
     <script src="https://rawgithub.com/paulo-raca/highcharts.com/axis-fixes/js/modules/heatmap.src.js"></script>

     <script src="https://rawgithub.com/paulo-raca/highcharts-contour/master/highcharts-contour.js"></script>
     <script src="https://rawgithub.com/ironwallaby/delaunay/master/delaunay.js"></script>
</head>
<body>
     <div id="container" style="height: 500px; width:500px; margin:0 auto"></div>


     <script type="text/javascript">

     $(function () 
     {
         var data=[];
         for (var x=-10; x<=10; x+=2) 
         {
             for (var y=-10; y<=10; y+=2) 
             {
                 var value = -2.5*x+0.5*x*x - y*y;
                 data.push({x:x, z:y, y:value, value:value});
             }
         }

         //bunch of code...

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

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

             $(document).bind(
             {
                 'mousemove.hc touchdrag.hc': function (e) 
                  {
                     // Run beta
                     newBeta = beta + (posX - e.pageX) / sensitivity;
                     newBeta = Math.min(75, Math.max(-75, newBeta));
                     chart.options.chart.options3d.beta = newBeta;
                     chart.yAxis[0].opposite = Math.sin(newBeta*Math.PI/180) < 0;

                     // Run alpha
                     newAlpha = alpha + (e.pageY - posY) / sensitivity;
                     newAlpha = Math.min(90, Math.max(-90, newAlpha));
                     chart.options.chart.options3d.alpha = newAlpha;
                     chart.xAxis[0].opposite = Math.sin(newAlpha*Math.PI/180) < 0;

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

     });

 </body>

错误我在控制台中收到这些错误

Uncaught TypeError: Cannot read property 'addEvent' of undefined (highcharts.src.js:17502)
Uncaught TypeError: Cannot read property 'prototype' of undefined (highcharts.src.js:152)
Uncaught TypeError: Highcharts.getOptions is not a function (heatmap.src.js:21)
Uncaught TypeError: Highcharts.getOptions is not a function (heatmap.src.js:15)
Uncaught TypeError: addEvent is not a function (highcharts.src.js:11222)`

使用Contour Curves 3D插件实现图表

0 个答案: