调试有关highcharts中的线和点的代码?

时间:2015-03-11 14:29:43

标签: javascript highcharts

我正在考虑如何调试代码,对于我的散点图3d,关于线和点。

这是代码:

 series: [{
        name: 'Reading',
        colorByPoint: true,                     
        data: coloriamo()},{ // this function draws some points
        data: [[0,750,0],[10,750,0] //this data draw a line
        ],
        lineWidth: 1,
        enableMouseTracking: false,
        marker: {
            enabled: false
        },
        color: 'rgba(0,0,0,0.51)'
        },{  
       data: [[175,750,5],[180,750,5] //draw line in the half of bottom frame
        ],
        lineWidth: 1,
        enableMouseTracking: false,
        marker: {
            enabled: false
        },
        color: 'rgba(0,0,0,0.51)'
        },{  
        data: [[0,750,10],[10,750,10] //draw a line
        ],
        lineWidth: 1,
        enableMouseTracking: false,
        marker: {
            enabled: false
        },
        color: 'rgba(0,0,0,0.51)'
        },{  
            data: [[11,750,-0.3]],  //draw a point for first line               
             dataLabels: {
               style: {
                    textShadow: 0
                },
                enabled: true,
                crop: false,
                overflow: false,
                 format: 0+'\u00B0'+' N',
            }, 
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: false
                    }
                }
            }                   
    },{  
            data: [[11,750,4.7]],    //a point for second line              
             dataLabels: {
                style: {
                    textShadow: 0
                },
                enabled: true,
                crop: false,
                overflow: false,
                 format: 5+'\u00B0'+' N',
            }, 
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: false
                    }
                }
            }                   
    },{  
            data: [[11,750,9.3]], //draw line for third line                
             dataLabels: {
               style: {
                    textShadow: 0
                },
                enabled: true,
                crop: false,
                overflow: false,
                 format: 10+'\u00B0'+' N',
            }, 
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: false
                    }
                }
            }                   
    }]

这是jsfiddle

http://jsfiddle.net/h2qxn54b/

问题是xAxis和Zaxis的“ max:”和“ min:”发生了变化,因此DATA(绘制线和点)的值也会发生变化。

我必须在返回数组的数据中添加一个函数来绘制线和点,但我不知道哪里有更好的方法。

最糟糕的方法是制作3个函数(每个“数据行”一个函数)和3个函数用于点,并将每个函数添加到数据

 var mycharts = [[35,40,173,180]]; //min.zAxis,max.zAxis,min.xAxis,maxxAxis

 function linefirst(){
      for (var s = 0; s <mycharts.length; s++) {
      var cas= mycharts[s];
      var minZ= cas[0];
      var maxZ= cas[1];
      var minX= cas[2];
      var maxX= cas[3];
      var middleZ= (minZ+maxZ)/2;
      } 
     var arraylinef=[];
     arraylinef.push([[minX,750,minZ],[maxX,750,minZ]]);
     return arraylinef;
     }



 function linesecond(){
      for (var s = 0; s <mycharts.length; s++) {
      var cas= mycharts[s];
      var minZ= cas[0];
      var maxZ= cas[1];
      var minX= cas[2];
      var maxX= cas[3];
      var middleZ= (minZ+maxZ)/2;
      } 
     var arraylines=[];
     arraylines.push([[minX,750,middleZ],[maxX,750,middleZ]]);
     return arraylines;
     }



 function linethird(){
      for (var s = 0; s <mycharts.length; s++) {
      var cas= mycharts[s];
      var minZ= cas[0];
      var maxZ= cas[1];
      var minX= cas[2];
      var maxX= cas[3];
      var middleZ= (minZ+maxZ)/2;
      } 
     var arraylinet=[];
     arraylinet.push([[minX,750,maxZ],[maxX,750,maxZ]]);
     return arraylinet;
     }

现在有3个功能可以画3点:

 function pointfirst(){
      for (var s = 0; s <mycharts.length; s++) {
      var cas= mycharts[s];
      var minZ= cas[0];
      var maxZ= cas[1];
      var minX= cas[2];
      var maxX= cas[3];
      var pointX= maxX+1;
      var pointfZ= minZ-0.3;
      var middleZ= (minZ+maxZ)/2;
      } 
     var arraypointf=[];
     arraypointf.push([[pointX,750,pointfZ]]);
     return arraypointf;
     }



 function pointsecond(){
      for (var s = 0; s <mycharts.length; s++) {
      var cas= mycharts[s];
      var minZ= cas[0];
      var maxZ= cas[1];
      var minX= cas[2];
      var maxX= cas[3];
      var pointX= maxX+1;
      var middleZ= (minZ+maxZ)/2;
      var pointsZ= middleZ-0.3;         
      } 
     var arraypoints=[];
     arraypoints.push([[pointX,750,pointsZ]]);
     return arraypoints;
     }



 function pointthird(){
      for (var s = 0; s <mycharts.length; s++) {
      var cas= mycharts[s];
      var minZ= cas[0];
      var maxZ= cas[1];
      var minX= cas[2];
      var maxX= cas[3];
      var pointX= maxX+1;         
      var pointtZ= maxZ-0.5;         
      } 
     var arraypointt=[];
     arraypointt.push([[pointX,750,pointtZ]]);
     return arraypointt;
     }

正如你所看到的那样,代码太过分了,这不是一个好主意...... 所以你能建议我吗?

对不起,这个大帖子和大代码......

谢谢!

0 个答案:

没有答案