Debugging code about lines and points in highcharts?

问题

i'm thinking how to debug the code, for my scatter 3d chart, about lines and points.

This is the code:

 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
                    }
                }
            }                   
    }]

this is jsfiddle

http://jsfiddle.net/h2qxn54b/

the problem is that "max:" and "min:" of xAxis and Zaxis changed, so also values of DATA (for draw lines and point) will change.

I must to add a function in data that return array to draw lines and points, but i don't know where is the better way to do.

The worst way is to make 3 functions (one function for each "data line") and 3 functions for points, and to add each function to data.

 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;
     }

And now 3 functions to draw 3 points:

 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;
     }

as you can see it would be too code, and it would not be a great idea... So can you suggest me ?

Sorry for the big post and the big code...

Thanks!

来源：https://stackoverflow.com/questions/28989321/debugging-code-about-lines-and-points-in-highcharts