如何在空图表中输入空值，然后在折线图中忽略它? [英] How to input null into highcharts and then ignore it in line graph?

问题描述

我正在使用高图制作折线图，每当输入为null时，折线图就会分解为散点图.我希望它只是忽略该值，而是连接到图形中的下一个点.我想我使用了正确的代码，但是图形仍然不会出错.当我将鼠标悬停在值上时，工具提示甚至说空(无论我是用CSV文字写空还是只留下;;)...

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>

这是我的CSV输入:

类别； CNRS； DACH-奥地利，德国和瑞士；欧洲； J.斯特凡研究所；马克斯·普朗克学会；国家生物学研究所卢布尔雅那；国家化学研究所卢布尔雅那；斯洛文尼亚科学院的科学研究中心；斯洛文尼亚；美国；斯图加特大学；卢布尔雅那大学；马里博尔大学；诺瓦大学戈里卡 整体; 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

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，屏幕截图以供参考

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

推荐答案

您可以使用 connectNulls

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

http://jsfiddle.net/7nfwe8mg/

这篇关于如何在空图表中输入空值，然后在折线图中忽略它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！