1
Das folgende Javascript erzeugt ein funktionierendes XY Streudiagramm mit der Bibliothek highcharts.js. Allerdings machen die X-Achsen-Labels etwas Funky. Die X-Achsenbeschriftungen sollten jeweils einen Prozentsatz zwischen 0% und 100% aufweisen. Sie tun dies für jedes Etikett, es sei denn, es gibt einen x-Wert für das Etikett.Highcharts Bug mit Etiketten
Zum Beispiel:
data: [
{x:84.3,y:123758,name:'University of New Hampshire'},
{x:77,y:127542,name:'New England School of Law'},
{x:79.7,y:131958,name:'Northeastern University'},
{x:76,y:116852,name:'Roger Williams University'},
{x:75.8,y:135160,name:'Suffolk University'},
]
Auf dem Diagramm, das Label für 76% sagt: "Roger Williams Universität" statt 76%.
Irgendwelche Vorschläge?
der Code All:
$(document).ready(function() {
var pre1,pre2;
$('#tuitionVbar').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy',
height:500,
events: {
load: function() {
var chart = this;
var dis_class;
$(chart.series).each(function (i, series) {
if("passing_85" == series.name){
series.name = 'Bar Pass Rate ≥ 85%';
}
if("passing_75" == series.name){
series.name = 'Bar Pass Rate 75% - 84.9%';
}
if("passing_60" == series.name){
series.name = 'Bar Pass Rate 60% - 74.9%';
}
if("passing_0" == series.name){
series.name = 'Bar Pass Rate < 60%';
}
$('<li class="'+dis_class+'" style="color:#FFF;font-weight:400;padding:3px;cursor:pointer;background-color: ' + series.color + '">' + series.name + '</li>').click(function() {
$(this).toggleClass("linethrough");
series.visible ? series.hide() : series.show();
}).appendTo('#legend');
});
}
}
},
title: {
text: 'Total Tuition Paid vs. Bar Pass Rate for 2014 Graduates'
},
xAxis: {
title: {
enabled: true,
text: 'Bar Pass Rates in 2014'
},
type:'category',
startOnTick: false,
endOnTick: false,
tickInterval:1,
showLastLabel: true,
max:100,
labels: {
formatter: function(){
if(this.value > 0){
return this.value + "%";
}else{
return this.value;
}
}
},
},
yAxis: {
title: {
text: 'Total Tuition Paid'
},min:0,max:200000,
labels: {
formatter: function(){
return '$' + Math.round(this.value/1000) + "k";
}
},
endOnTick:false
},
legend: {
enabled:false,
layout: 'vertical',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
tooltip: {
useHTML:true,
formatter: function() {
return '<b>' + this.point.name + '</b><br>Total Tuition: $' + Math.round(this.y/1000) + 'k<br>Bar Pass Rate: ' + this.x + '%';
}
},
series: [
{
name: 'passing_85',
marker: {
symbol: 'circle'
},
color: 'rgba(124, 181, 236, 0.85)',
data: [
{x:90.9,y:135532,name:'Boston College'},
{x:92.8,y:137142,name:'Boston University'},
{x:89.7,y:72950,name:'University of Connecticut'},
]
},
{
name: 'passing_75',
marker: {
symbol: 'circle'
},
color: 'rgba(252,186,63,1)',
data: [
{x:84.3,y:123758,name:'University of New Hampshire'},
{x:77,y:127542,name:'New England School of Law'},
{x:79.7,y:131958,name:'Northeastern University'},
{x:76,y:116852,name:'Roger Williams University'},
{x:75.8,y:135160,name:'Suffolk University'},
]
},
{
name: 'passing_60',
marker: {
symbol: 'circle'
},
color: 'rgba(255,19,0,.7)',
data: [
{x:73.1,y:121482,name:'Western New England University School of Law'},
{x:64.9,y:72534,name:'University of Massachusetts Dartmouth'},
]
},
]
});
});