How to input null into highcharts and then ignore it in line graph?

你说的曾经没有我的故事 提交于 2019-12-11 14:47:52

问题


I'm making a line graph using highcharts and whenever the input is null the line graph breaks into scatterplot. I would like it to just ignore that value and connect to the next point in the graph instead. I think I used the correct code, but the graph still won't budge. When I mouseover the value the tooltip even says null (whether I write null with a word in CSV or just leave ;;)...

            $("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>

this is my CSV input:

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

edit:updated code and question, added CSV, screenshot for reference


回答1:


You can use connectNulls

 plotOptions:{
        series:{
            connectNulls:true
        }
 },

http://jsfiddle.net/7nfwe8mg/



来源:https://stackoverflow.com/questions/27777441/how-to-input-null-into-highcharts-and-then-ignore-it-in-line-graph

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!