javascript - 为什么 highchart 返回 "Typeerror : undefined variable byte "？

Question

我试图在 Highcharts 的帮助下绘制图表，并且还使用加载事件我试图在每 1 秒后向图表添加值。

在此图中，我还想将轴显示为 Mb、Kb、、Gb 数据。所以我正在编写一个函数以将字节值返回为 Mb、Kb、Gb(对于系列和工具提示)

这是我的代码:

// highchart options :
var series1, series2 ;

var chart = {
          type: 'bar',
              events: {
                    load: function () {
                        // set up the updating of the chart each second
                        series1 = this.series[0];
                        series2 = this.series[1];

                        setInterval(function () {

                            add_function();

                        }, 1000);//call function each 1 second
                    }
                }


};

var tooltip = { 
          enabled: true, 
          formatter: function() { return fbytes(this.y,2);} 
}; 

var plotOptions = { 
          bar: { 
          }, 
          series: { 
            dataLabels: { 
                enabled: true, 
                formatter: function() { return fbytes(this.y,2);}, 
                inside: true, 
                style: {fontWeight: 'number'} 
            },   
            pointPadding: 0, 
            pointWidth:38 
          }, 
          column : { 
             grouping: true 
          }     
};

series= [
            {
             name: 'old',
             color: '#f9a80e',
             data: [,]
            }, 
            {
                name: 'new',
                color: '#89897f',
                data: [,]
            }
];

加载事件函数是:

Array.max = function (array) { 
        return Math.max.apply(Math, array); 
}; 
Array.min = function (array) { 
        return Math.min.apply(Math, array); 
}; 

add_function()
{ 
    var arr[];
    //getting array values here 
    var min_value = Array.min(arr); 
    var max_value = Array.max(arr); 

    var chart2 = $('#container').highcharts();
    chart2.yAxis[0].update({max:max_value, min: 0}, true); 

    series1.setData([arr[0],arr[2]], true, true); 
    series2.setData([arr[1],arr[3]], true, true);
  }

和转换函数:

function fbytes(bytes, precision) { 
    var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; 
    var posttxt = 0; 
    if (bytes == 0) return '0 Bytes'; 
    if (bytes < 1024) { 
            return Number(bytes) + " " + sizes[posttxt]; 
    } 
    while( bytes >= 1024 ) { 
            posttxt++; 
            bytes = bytes / 1024; 
    } 
    return Math.round(bytes.toPrecision(precision)) + " " + sizes[posttxt]; 
}

我的逻辑:我随机得到了一些数组值，我在图表上显示这些数据。

面临的问题:我没有在 series 中得到 this.y 值。当我在里面打印这个值时

 series: { 
            dataLabels: { 
                enabled: true, 
                formatter: function() { return fbytes(this.y,2);}, 
                inside: true, 
                style: {fontWeight: 'number'} 
            },

我得到 this.y = undefined 。怎么了 ？

代码有错吗？有什么建议吗？

Answer 1

我使用您的代码创建了演示并稍微修改了 add_function()。你的意思是这样的吗？

function add_function(series1, series2) {
    var chart2 = $('#container').highcharts(),
      increment = 1024,
      min_value,
      max_value,
      newVal1 = [],
      newVal2 = [];

    if (!series1.data.length && !series2.data.length) {
        var arr = [512, 128, 1024, 0];

        min_value = Array.min(arr);
        max_value = Array.max(arr);

        newVal1 = [arr[0], arr[2]];
        newVal2 = [arr[1], arr[3]];
    } else {
        series1.yData.forEach(function(sEl, sInx) {
            newVal1.push(sEl + increment);
        });

        series2.yData.forEach(function(sEl, sInx) {
            newVal2.push(sEl + increment);
        });
        max_value = Array.max(newVal1.concat(newVal2));
    }

    chart2.yAxis[0].update({
        max: max_value,
        min: 0
    }, true);

    series1.setData(newVal1, true, true);
    series2.setData(newVal2, true, true);
}

例子: http://jsfiddle.net/js3g311q/