來自函數的系列數據填充HighCharts活動計量器

Question

我試圖從經典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

您的代碼中有一些小的拼寫錯誤/錯誤。

1. 這裏：dadai['y'] = gg[i];沒有dadai，但您嘗試訪問它 - 它應該是datai。

2. 這裏：chart.series[0].addPoint(ns);你應該添加系列，而不是添加點到一個不存在的系列（因爲你有series: []，所以沒有系列）。

3. 這裏：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(); 

而且，做一個圖表中超過1種的動態變化，將調用一個重繪你應該設置重繪參數（如功能addSeries）至false並致電chart.redraw()後動態更改爲更好的性能和動畫。