如何将 null 输入 highcharts 然后在折线图中忽略它?
How to input null into highcharts and then ignore it in line graph?
我正在使用 highcharts 制作折线图,只要输入为空,折线图就会变成散点图。我希望它忽略该值并连接到图中的下一个点。我想我使用了正确的代码,但图表仍然没有变化。当我将鼠标悬停在该值上时,工具提示甚至会显示 null(无论我用 CSV 中的单词写 null 还是只是离开 ;;)...
$("select").change(function() {
$("select option:selected").each(function() {
var variable = $(this).val();
var graphtitle;
switch (variable) {
case "CSV/Sheet1.csv":
graphtitle = "Academic-Corporate Collaboration";
break;
case "CSV/Sheet2.csv":
graphtitle = "Academic-Corporate Collaboration Impact";
break;
case "CSV/Sheet3.csv":
graphtitle = "Citation Count";
break;
case "CSV/Sheet4.csv":
graphtitle = "Citation Count, self-citations excluded";
break;
case "CSV/Sheet5.csv":
graphtitle = "Citations per Publication";
break;
case "CSV/Sheet6.csv":
graphtitle = "Citations per publication, self-citations excluded";
break;
case "CSV/Sheet7.csv":
graphtitle = "Cited publications (%)";
break;
case "CSV/Sheet8.csv":
graphtitle = "Cited publications (%), self-citations excluded";
break;
case "CSV/Sheet9.csv":
graphtitle = "Field-Weighted Citation Impact";
break;
case "CSV/Sheet10.csv":
graphtitle = "Output in top 10 percentiles (%)";
break;
case "CSV/Sheet11.csv":
graphtitle = "Output in top 10 percentiles (%), self-citations excluded";
break;
case "CSV/Sheet12.csv":
graphtitle = "Publications in top 10 journal percentiles (%, SJR)";
break;
case "CSV/Sheet13.csv":
graphtitle = "Scholarly Output";
break;
}
$.get(variable, function(csv) {
$('.graphcontainer').highcharts({
chart: {
type: 'line'
},
data: {
csv: csv,
itemDelimiter: ';'
},
title: {
text: graphtitle
},
plotOptions: {
series: {
connectNulls: true
}
},
yAxis: {
title: {
text: ''
}
},
legend: {
layout: 'vertical'
},
credits: {
enabled: false
},
tooltip: {
formatter: function() {
var s = [];
$.each(this.points, function(i, point) {
s.push('<span class="tooltip">' + point.series.name + ' : ' +
point.y + '<br><span>');
});
return s.join('');
},
shared: true
}
});
});
});
})
.change();
.graphcontainer {
width: 80%;
height: 600px;
margin: auto;
border: 1px solid black;
}
#selectcontainer {
width: 80%;
margin: auto;
border: 1px solid black;
}
#CSVinput {
width: 60%;
font-family: verdana;
margin-left: 20%;
}
<!DOCTYPE html>
<html>
<head>
<title>Grafi IJS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="grafi.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/data.js"></script>
</head>
<body>
<div class="graphcontainer"></div>
<div id="selectcontainer">
<select id="CSVinput">
<option value="CSV/Sheet1.csv" selected="selected">Academic-Corporate Collaboration</option>
<option value="CSV/Sheet2.csv">Academic-Corporate Collaboration Impact</option>
<option value="CSV/Sheet3.csv">Citation Count</option>
<option value="CSV/Sheet4.csv">Citation Count, self-citations excluded</option>
<option value="CSV/Sheet5.csv">Citations per Publication</option>
<option value="CSV/Sheet6.csv">Citations per publication, self-citations excluded</option>
<option value="CSV/Sheet7.csv">Cited publications (%)</option>
<option value="CSV/Sheet8.csv">Cited publications (%), self-citations excluded</option>
<option value="CSV/Sheet9.csv">Field-Weighted Citation Impact</option>
<option value="CSV/Sheet10.csv">Output in top 10 percentiles (%)</option>
<option value="CSV/Sheet11.csv">Output in top 10 percentiles (%), self-citations excluded</option>
<option value="CSV/Sheet12.csv">Publications in top 10 journal percentiles (%, SJR)</option>
<option value="CSV/Sheet13.csv">Scholarly Output</option>
</select>
</div>
<script type="text/javascript" src="grafi.js"></script>
</body>
</html>
这是我的 CSV 输入:
Categories;CNRS;DACH - Austria, Germany and Switzerland;Europe;J. Stefan Institute;Max Planck Society;National Institute of Biology Ljubljana;National Institute of Chemistry Ljubljana;Scientific Research Centre of the Slovenian Academy of Sciences and Arts;Slovenia;United States;Universitat Stuttgart;University of Ljubljana;University of Maribor;University of Nova Gorica
Overall;1.9;3.1;1.9;1.4;2.9;0.8;2.3;0.4;1.2;3;4.7;1.2;0.4;4.8
1996;1.7;2.7;1.8;0.5;3.8;0;2.5;0;1.3;3.1;5.2;1.7;0;;
1997;1.5;2.8;1.8;1.4;4;0;1.7;0;0.6;3.2;6.5;0.7;0;;
1998;1.8;2.9;1.9;1.6;4;0;0;0;0.9;3.3;5.5;1;0.6;;
1999;1.8;2.8;1.8;0.3;4;0;2.7;0;0.8;3.1;4.8;0.9;0;0
2000;1.7;2.7;1.7;1.2;2.9;0;0;0;0.8;2.9;4.6;0.8;1.2;0
2001;1.6;2.6;1.6;1.6;3.2;0;0;;0.7;2.6;5;1;0;4.2
2002;1.5;2.6;1.6;0.7;2.8;0;0;0;0.8;2.5;4.3;0.7;0.4;8
2003;1.4;3.3;2.1;1.7;3.1;4.2;1.4;0;1.1;3.2;7;1.3;0.2;2.5
2004;1.4;3.4;2.2;1.6;3;3;2.6;0;1.3;3.3;4.8;1.8;0.3;1.9
2005;2.1;3.4;2.2;1.5;2.9;2.9;1.9;0;1.3;3.3;5.8;1.5;1;1.2
2006;1.7;3.2;2.1;1.8;2.9;0;3.7;0;1.5;3.2;5.5;2;0.2;2
2007;2.3;3.4;2.1;0.6;2.8;0;3.8;0;0.9;3.3;5.6;1;0.4;0
2008;1.7;3.3;2.1;0.5;2.6;0;3.1;0;1.3;3.2;4.8;1.4;0.3;6.1
2009;1.9;3.3;2;3.1;2.4;1.2;1.1;0;1.9;3.1;4.2;1.8;0.2;4.9
2010;2;3.2;1.9;1.6;2.3;1.8;3.2;0;1.2;2.9;4.2;1.2;0.6;4.2
2011;2.1;3.2;1.9;1.8;2.4;0;2.4;3.4;1.1;2.9;3.5;1.1;0.3;5.3
2012;2.3;3.2;1.9;1.4;2.3;2;3.6;0;1.1;2.8;3.4;1;0.1;4.3
2013;2.2;3.2;1.8;1.2;2.5;0;3.4;0;1.4;2.7;3.8;1.1;0.4;12.5
2014;2.5;3.1;1.8;1.7;2.6;0;2.2;0;1.3;2.7;3.6;1.3;0.2;7.6
编辑:更新了代码和问题,添加了 CSV,截图以供参考
您可以使用 connectNulls
plotOptions:{
series:{
connectNulls:true
}
},
我正在使用 highcharts 制作折线图,只要输入为空,折线图就会变成散点图。我希望它忽略该值并连接到图中的下一个点。我想我使用了正确的代码,但图表仍然没有变化。当我将鼠标悬停在该值上时,工具提示甚至会显示 null(无论我用 CSV 中的单词写 null 还是只是离开 ;;)...
$("select").change(function() {
$("select option:selected").each(function() {
var variable = $(this).val();
var graphtitle;
switch (variable) {
case "CSV/Sheet1.csv":
graphtitle = "Academic-Corporate Collaboration";
break;
case "CSV/Sheet2.csv":
graphtitle = "Academic-Corporate Collaboration Impact";
break;
case "CSV/Sheet3.csv":
graphtitle = "Citation Count";
break;
case "CSV/Sheet4.csv":
graphtitle = "Citation Count, self-citations excluded";
break;
case "CSV/Sheet5.csv":
graphtitle = "Citations per Publication";
break;
case "CSV/Sheet6.csv":
graphtitle = "Citations per publication, self-citations excluded";
break;
case "CSV/Sheet7.csv":
graphtitle = "Cited publications (%)";
break;
case "CSV/Sheet8.csv":
graphtitle = "Cited publications (%), self-citations excluded";
break;
case "CSV/Sheet9.csv":
graphtitle = "Field-Weighted Citation Impact";
break;
case "CSV/Sheet10.csv":
graphtitle = "Output in top 10 percentiles (%)";
break;
case "CSV/Sheet11.csv":
graphtitle = "Output in top 10 percentiles (%), self-citations excluded";
break;
case "CSV/Sheet12.csv":
graphtitle = "Publications in top 10 journal percentiles (%, SJR)";
break;
case "CSV/Sheet13.csv":
graphtitle = "Scholarly Output";
break;
}
$.get(variable, function(csv) {
$('.graphcontainer').highcharts({
chart: {
type: 'line'
},
data: {
csv: csv,
itemDelimiter: ';'
},
title: {
text: graphtitle
},
plotOptions: {
series: {
connectNulls: true
}
},
yAxis: {
title: {
text: ''
}
},
legend: {
layout: 'vertical'
},
credits: {
enabled: false
},
tooltip: {
formatter: function() {
var s = [];
$.each(this.points, function(i, point) {
s.push('<span class="tooltip">' + point.series.name + ' : ' +
point.y + '<br><span>');
});
return s.join('');
},
shared: true
}
});
});
});
})
.change();
.graphcontainer {
width: 80%;
height: 600px;
margin: auto;
border: 1px solid black;
}
#selectcontainer {
width: 80%;
margin: auto;
border: 1px solid black;
}
#CSVinput {
width: 60%;
font-family: verdana;
margin-left: 20%;
}
<!DOCTYPE html>
<html>
<head>
<title>Grafi IJS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="grafi.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/data.js"></script>
</head>
<body>
<div class="graphcontainer"></div>
<div id="selectcontainer">
<select id="CSVinput">
<option value="CSV/Sheet1.csv" selected="selected">Academic-Corporate Collaboration</option>
<option value="CSV/Sheet2.csv">Academic-Corporate Collaboration Impact</option>
<option value="CSV/Sheet3.csv">Citation Count</option>
<option value="CSV/Sheet4.csv">Citation Count, self-citations excluded</option>
<option value="CSV/Sheet5.csv">Citations per Publication</option>
<option value="CSV/Sheet6.csv">Citations per publication, self-citations excluded</option>
<option value="CSV/Sheet7.csv">Cited publications (%)</option>
<option value="CSV/Sheet8.csv">Cited publications (%), self-citations excluded</option>
<option value="CSV/Sheet9.csv">Field-Weighted Citation Impact</option>
<option value="CSV/Sheet10.csv">Output in top 10 percentiles (%)</option>
<option value="CSV/Sheet11.csv">Output in top 10 percentiles (%), self-citations excluded</option>
<option value="CSV/Sheet12.csv">Publications in top 10 journal percentiles (%, SJR)</option>
<option value="CSV/Sheet13.csv">Scholarly Output</option>
</select>
</div>
<script type="text/javascript" src="grafi.js"></script>
</body>
</html>
这是我的 CSV 输入:
Categories;CNRS;DACH - Austria, Germany and Switzerland;Europe;J. Stefan Institute;Max Planck Society;National Institute of Biology Ljubljana;National Institute of Chemistry Ljubljana;Scientific Research Centre of the Slovenian Academy of Sciences and Arts;Slovenia;United States;Universitat Stuttgart;University of Ljubljana;University of Maribor;University of Nova Gorica Overall;1.9;3.1;1.9;1.4;2.9;0.8;2.3;0.4;1.2;3;4.7;1.2;0.4;4.8 1996;1.7;2.7;1.8;0.5;3.8;0;2.5;0;1.3;3.1;5.2;1.7;0;; 1997;1.5;2.8;1.8;1.4;4;0;1.7;0;0.6;3.2;6.5;0.7;0;; 1998;1.8;2.9;1.9;1.6;4;0;0;0;0.9;3.3;5.5;1;0.6;; 1999;1.8;2.8;1.8;0.3;4;0;2.7;0;0.8;3.1;4.8;0.9;0;0 2000;1.7;2.7;1.7;1.2;2.9;0;0;0;0.8;2.9;4.6;0.8;1.2;0 2001;1.6;2.6;1.6;1.6;3.2;0;0;;0.7;2.6;5;1;0;4.2 2002;1.5;2.6;1.6;0.7;2.8;0;0;0;0.8;2.5;4.3;0.7;0.4;8 2003;1.4;3.3;2.1;1.7;3.1;4.2;1.4;0;1.1;3.2;7;1.3;0.2;2.5 2004;1.4;3.4;2.2;1.6;3;3;2.6;0;1.3;3.3;4.8;1.8;0.3;1.9 2005;2.1;3.4;2.2;1.5;2.9;2.9;1.9;0;1.3;3.3;5.8;1.5;1;1.2 2006;1.7;3.2;2.1;1.8;2.9;0;3.7;0;1.5;3.2;5.5;2;0.2;2 2007;2.3;3.4;2.1;0.6;2.8;0;3.8;0;0.9;3.3;5.6;1;0.4;0 2008;1.7;3.3;2.1;0.5;2.6;0;3.1;0;1.3;3.2;4.8;1.4;0.3;6.1 2009;1.9;3.3;2;3.1;2.4;1.2;1.1;0;1.9;3.1;4.2;1.8;0.2;4.9 2010;2;3.2;1.9;1.6;2.3;1.8;3.2;0;1.2;2.9;4.2;1.2;0.6;4.2 2011;2.1;3.2;1.9;1.8;2.4;0;2.4;3.4;1.1;2.9;3.5;1.1;0.3;5.3 2012;2.3;3.2;1.9;1.4;2.3;2;3.6;0;1.1;2.8;3.4;1;0.1;4.3 2013;2.2;3.2;1.8;1.2;2.5;0;3.4;0;1.4;2.7;3.8;1.1;0.4;12.5 2014;2.5;3.1;1.8;1.7;2.6;0;2.2;0;1.3;2.7;3.6;1.3;0.2;7.6
编辑:更新了代码和问题,添加了 CSV,截图以供参考
您可以使用 connectNulls
plotOptions:{
series:{
connectNulls:true
}
},