Question

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

第一个例子是没有功能 - 并且有效。 http://jsfiddle.net/p40472pz/

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

});

}）;

我无法找到使用函数http://jsfiddle.net/x7a2f91r/

执行此操作的正确方法

$(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);
  });

}）;

Answer 1

您的代码中存在一些小的错别字/错误。

此处：dadai['y'] = gg[i];没有dadai，但您正在尝试访问它 - 它应该是datai。
此处：chart.series[0].addPoint(ns);您应该添加系列而不是向不存在的系列添加点数（因为您有series: []，因此没有系列）。
此处：seria['bordercolor'] = brcolor[i];选项名为borderColor - 区分大小写，因此您的选项不起作用。

修正和工作演示：http://jsfiddle.net/w5jxeLmj/1/

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();

此外，当在图表中进行多次动态更改以调用重绘时，您应该将重绘参数（例如函数addSeries）设置为false并在之后调用chart.redraw()所有动态变化，以获得更好的性能和动画。

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

1 个答案: