Javascript HighCharts活动量表由函数的系列数据填充

我正在尝试用经典ASP中SQL Server的结果填充HighCharts数据集。（在示例中，显然有数字和名称，而不是vbscript变量）

第一个示例没有函数，并且可以工作

$（函数（）{
变量N=''
if（！Highcharts.theme）{
Highcharts.setOptions({
图表：{
背景颜色：“rgba（255255,0.002）”
},
颜色：[“#666666”、“#666666”、“#666666”、“#666666”、“#666666”、“#666666”、“#666666”、“#666666”]，
工具提示：{
风格：{
颜色：'#A0'
}
}
});
}
// */
海图。海图（'11'{
图表：{
类型：“solidgauge”，
边距：[0,0,0,0]
},
标题：{
文本：“”，
风格：{
字体大小：“12px”
}
},
工具提示：{
边框宽度：1，
背景颜色：“白色”，
影子：错，
是的，
风格：{
fontSize:'14px'，
fontFamily：“arial”，
方向：“rtl”
},
pointFormat:“{series.name}{point.y}%”
//定位器：功能（标签宽度、标签高度）{
//返回{
//x:120-标签宽度/2，
//y:20
//  };
// }
},
窗格：{
startAngle:0，
端角：360，
背景：[{
外层：112%，
内半径：“106%”，
背景颜色：“#eeeeee”，
边框宽度：1
}, { 
外层：99%，
内半径：“93%”，
背景颜色：“#eeeeee”，
边框宽度：1
}]
},
亚克斯：{
分:0,，
最高：100，
线宽：0，
位置：[]
},
学分：{
已启用：false
},
打印选项：{
solidgauge：{
边框宽度：“6px”，
数据标签：{
已启用：false
},
线头：“圆形”，
粘滞跟踪：错误
}
},
系列：[{
名称：'name1'，
borderColor:Highcharts.getOptions（）.Color[0]，
数据：[{
颜色：Highcharts.getOptions（）.color[0]，
半径：“109%”，
内半径：“109%”，
y:80
}]
}, {
名称：“namme2”，
borderColor:Highcharts.getOptions（）.Color[1]，
数据：[{
颜色：Highcharts.getOptions（）.color[1]，
半径：“96%”，
内半径：“96%”，
y:65
}]
}]
});

}))

我找不到使用函数的正确方法

$（函数（）{
变量N=2
var brcolor=[]
var tl=[]
变量frcolor=[]
var rd=[]
var gg=[]
brcolor[1]=“#666666”
brcolor[2]=“#666666”
tl[1]=“名称1”
tl[2]=“名称2”
frcolor[1]=“#666666”
frcolor[2]=“#666666”
rd[1]=“109%”
rd[2]=“96%”
gg[1]=80
gg[2]=65
if（！Highcharts.theme）{
Highcharts.setOptions({
图表：{
背景颜色：“rgba（255255,0.002）”
},
颜色：[“#666666”、“#666666”、“#666666”、“#666666”、“#666666”、“#666666”、“#666666”、“#666666”]，
工具提示：{
风格：{
颜色：'#A0'
}
}
});
}
海图。海图（'11'{
图表：{
类型：“solidgauge”，
边距：[0,0,0,0]
},
标题：{
文本：“”，
风格：{
字体大小：“12px”
}
},
工具提示：{
边框宽度：1，
背景颜色：“白色”，
影子：错，
是的，
风格：{
fontSize:'14px'，
fontFamily：“arial”，
方向：“rtl”
},
pointFormat:“{series.name}{point.y}%”
//定位器：功能（标签宽度、标签高度）{
//返回{
//x:120-标签宽度/2，
//y:20
//  };
// }
},
窗格：{
startAngle:0，
端角：360，
背景：[{
外层：112%，
内半径：“106%”，
背景颜色：“#eeeeee”，
边框宽度：1
}, { 
外层：99%，
内半径：“93%”，
背景颜色：“#eeeeee”，
边框宽度：1
}]
},
亚克斯：{
分:0,，
最高：100，
线宽：0，
位置：[]
},
学分：{
已启用：false
},
打印选项：{
solidgauge：{
边框宽度：“6px”，
数据标签：{
已启用：false
},
线头：“圆形”，
粘滞跟踪：错误
}
},
系列：[]
});
var newSeries=[]
对于（var i=1；i您的代码中有一些小的输入错误/错误

这里：
dadai['y']=gg[i]；
没有
dadai
，但您正在尝试访问它-它应该是
datai

此处：
chart.series[0].addPoint（ns）；
您应该添加序列，而不是向不存在的序列添加点（因为您有
series:[]
，所以没有序列）

此处：
seria['bordercolor']=brcolor[i]；
选项名为
bordercolor
——区分大小写，因此您的选项不起作用

固定和工作演示：

var newSeries=[]
对于（var i=1；i您的代码中有一些小的输入错误/错误

这里：
dadai['y']=gg[i]；
没有
dadai
，但您正在尝试访问它-它应该是
datai

此处：
chart.series[0].addPoint（ns）；
您应该添加序列，而不是向不存在的序列添加点（因为您有
series:[]
，所以没有序列）

此处：
seria['bordercolor']=brcolor[i]；
选项名为
bordercolor
——区分大小写，
$(function () {


var N = '<%=n11 %>'




if (!Highcharts.theme) {
    Highcharts.setOptions({
        chart: {
            backgroundColor: 'rgba(255,255,255,0.002)'
        },
        colors: ['#666666', '#666666', '#666666', '#666666', '#666666', '#666666', '#666666'],

        tooltip: {
            style: {
                color: '#a0a0a0'
            }
        }
    });
}
// */

Highcharts.chart('11', {

    chart: {
        type: 'solidgauge',
        margin: [0, 0, 0, 0]

    },

    title: {
        text: '',
        style: {
            fontSize: '12px'
        }
    },

    tooltip: {
        borderWidth: 1,
        backgroundColor: 'white',
        shadow: false,
        useHTML: true, 
        style: {
            fontSize: '14px',
            fontFamily: 'arial',
            direction: 'rtl'
        },
        pointFormat: '<div style="width: 120px; white-space:normal; text-align: right">{series.name}</div><div style="text-align: center"><span style="font-size:1.3em; font-weight: bold; color: {point.color}; ">{point.y}%</span></div>'
        // positioner: function (labelWidth, labelHeight) {
            //   return {
            //     x: 120 - labelWidth / 2,
            //      y: 20
            //  };
        // }
    },

    pane: {
        startAngle: 0,
        endAngle: 360,
        background: [{ 
            outerRadius: '112%',
            innerRadius: '106%',

            backgroundColor: '#eeeeee',
            borderWidth: 1
        }, { 
            outerRadius: '99%',
            innerRadius: '93%',

            backgroundColor: '#eeeeee',
            borderWidth: 1
        }]
    },

    yAxis: {

        min: 0,
        max: 100,
        lineWidth: 0,
        tickPositions: []
    },
    credits: {
        enabled: false
    },

    plotOptions: {
        solidgauge: {
            borderWidth: '6px',
            dataLabels: {
                enabled: false
            },
            linecap: 'round',
            stickyTracking: false
        }
    },

    series: [{
        name: 'name1',
        borderColor: Highcharts.getOptions().colors[0],
        data: [{
            color: Highcharts.getOptions().colors[0],
            radius: '109%',
            innerRadius: '109%',
            y: 80
        }]
    }, {
        name: 'namme2',
        borderColor: Highcharts.getOptions().colors[1],
        data: [{
            color: Highcharts.getOptions().colors[1],
            radius: '96%',
            innerRadius: '96%',
            y: 65
        }]
    }]

});

$(function () {

var N=2
var brcolor = []
var tl = []
var frcolor = []
var rd = []
var gg = []

brcolor[1] = '#666666'
brcolor[2] = '#666666'

tl[1] = 'name1'
tl[2] = 'name2'

frcolor[1] = '#666666'
frcolor[2] = '#666666'

rd[1] = '109%'
rd[2] = '96%'

gg[1] = 80
gg[2] = 65

if (!Highcharts.theme) {
    Highcharts.setOptions({
        chart: {
            backgroundColor: 'rgba(255,255,255,0.002)'
        },
        colors: ['#666666', '#666666', '#666666', '#666666', '#666666', '#666666', '#666666'],

        tooltip: {
            style: {
                color: '#a0a0a0'
            }
        }
    });
}


Highcharts.chart('11', {

    chart: {
        type: 'solidgauge',
        margin: [0, 0, 0, 0]

    },

    title: {
        text: '',
        style: {
            fontSize: '12px'
        }
    },

    tooltip: {
        borderWidth: 1,
        backgroundColor: 'white',
        shadow: false,
        useHTML: true, 
        style: {
            fontSize: '14px',
            fontFamily: 'arial',
            direction: 'rtl'
        },
        pointFormat: '<div style="width: 120px; white-space:normal; text-align: right">{series.name}</div><div style="text-align: center"><span style="font-size:1.3em; font-weight: bold; color: {point.color}; ">{point.y}%</span></div>'
        // positioner: function (labelWidth, labelHeight) {
            //   return {
            //     x: 120 - labelWidth / 2,
            //      y: 20
            //  };
        // }
    },

    pane: {
        startAngle: 0,
        endAngle: 360,
        background: [{ 
            outerRadius: '112%',
            innerRadius: '106%',

            backgroundColor: '#eeeeee',
            borderWidth: 1
        }, { 
            outerRadius: '99%',
            innerRadius: '93%',

            backgroundColor: '#eeeeee',
            borderWidth: 1
        }]
    },

    yAxis: {

        min: 0,
        max: 100,
        lineWidth: 0,
        tickPositions: []
    },
    credits: {
        enabled: false
    },

    plotOptions: {
        solidgauge: {
            borderWidth: '6px',
            dataLabels: {
                enabled: false
            },
            linecap: 'round',
            stickyTracking: false
        }
    },

    series: []
});

var newSeries=[]
    for (var i=1; i<N; i++){
        var newData[];
    var seria={};
    var datai={};
    datai['color'] = frcolor[i];
    datai['radius'] = rd[i];
    datai['innerRadius'] = rd[i];
    dadai['y'] = gg[i];

    seria['bordercolor'] = brcolor[i];
    seria['name'] = tl[i];
    seria['data'] = [datai[i]];

    newSeries.push(seria);   

    }

  var chart = $('#11').highcharts();

  $.each(newSeries, function (i, ns) {
      chart.series[0].addPoint(ns);
  });

var newSeries=[]
    for (var i=1; i<=N; i++){
        var newData=[];
    var seria={};
    var datai={};
    datai['color'] = frcolor[i];
    datai['radius'] = rd[i];
    datai['innerRadius'] = rd[i];
    datai['y'] = gg[i];

    seria['borderColor'] = brcolor[i];
    seria['name'] = tl[i];
    seria['data'] = [datai];

    newSeries.push(seria);   

    }

  var chart = $('#11').highcharts();

  $.each(newSeries, function (i, ns) {
      chart.addSeries(ns, false);
  });
  chart.redraw();