HighCharts Daten von der Datenbank nach außerhalb Js-Datei erhalten

Question

Ich versuche, eine HighCharts mit Ergebnissen von SQL Server in Classic ASP zu füllen. Solange die js in der ASP-Datei ist der Code funktioniert, nehmen Sie an, n11 = 2 dh.

<script> 
$(function() { 

var N = '<% = n11 %>' 
var brcolor = [] 
var tl = [] 
var frcolor = [] 
var rd = [] 
var inrd = [] 
var otrd = [] 
var gg = [] 
var zeva = [] 
var ovi = [] 

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

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

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

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

inrd[1] = '112%' 
inrd[2] = '106%' 

otrd[1] = '99%' 
otrd[2] = '93%' 

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

zeva[1] = '#eeeeee' 
zeva[2] = '#eeeeee' 
zeva[3] = '#ffffff' 

ovi[1] = 1 
ovi[2] = 1 
ovi[3] = 0 


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: zeva[1], 
      borderWidth: ovi[1] 
     }, { 
      outerRadius: '99%', 
      innerRadius: '93%', 

      backgroundColor: zeva[2], 
      borderWidth: ovi[2] 
     }, { 
      outerRadius: '86%', 
      innerRadius: '80%', 

      backgroundColor: zeva[3], 
      borderWidth: ovi[3] 

     }] 

    }, 

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

}); 

    </script> 

Aber wenn ich eine separate JS-Datei (11.js) haben und includ es in dem Dateikopf funktioniert es nicht.

Die Kopfzeile

<script type=text/javascript src=charts/11.js></script> 

Js ist:

$(function() { 

var N = '<% = n11 %>' 
var brcolor = [] 
var tl = [] 
var frcolor = [] 
var rd = [] 
var inrd = [] 
var otrd = [] 
var gg = [] 
var zeva = [] 
var ovi = [] 

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

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

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

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

inrd[1] = '112%' 
inrd[2] = '106%' 

otrd[1] = '99%' 
otrd[2] = '93%' 

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

zeva[1] = '#eeeeee' 
zeva[2] = '#eeeeee' 
zeva[3] = '#ffffff' 

ovi[1] = 1 
ovi[2] = 1 
ovi[3] = 0 


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: zeva[1], 
      borderWidth: ovi[1] 
     }, { 
      outerRadius: '99%', 
      innerRadius: '93%', 

      backgroundColor: zeva[2], 
      borderWidth: ovi[2] 
     }, { 
      outerRadius: '86%', 
      innerRadius: '80%', 

      backgroundColor: zeva[3], 
      borderWidth: ovi[3] 

     }] 

    }, 

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

});

Wenn ich das gleiche mache, aber eine Nummer anstelle von '<% = n11%> setze, ist es auch ok.

Was mache ich falsch?

Answer 1

Wenn ich Sie richtig verstehe, möchten Sie wissen, wie Sie von einer externen JavaScript-Datei auf Ihre Daten zugreifen können.

Here is a plnkr using requirejs to achieve this.

Zusätzlich erwähnt, dass, wenn Sie <% = n11%> auf eine Zahl dann auch ok es ist. Der Grund dafür ist, dass Sie in einer Schleife auf N zugreifen und dann N gegen i auswerten. Aber <% = n11%> bewertet nicht zu einer Zahl, so dass die Schleife nicht funktioniert, es sei denn, Sie ändern es in eine Zahl, dann wird es viele Male Schleife.

In der Demo habe ich es in 2 geändert, weil das die durchschnittliche Länge Ihrer Datenfelder ist.

Da Sie auch Messgeräte erstellen möchten und diese normalerweise nicht mehrere Datensätze haben, dachte ich, dass Sie vielleicht mehrere Messgeräte haben wollten, also modifizierte ich die Demo, die in der solidgauge api documentation on highcharts bereitgestellt wird.