javascript - Highcharts:从 CSV 加载数据时默认禁用系列

Question

我有一堆由 CSV 文件制作的图表，我希望默认禁用其中一些系列。该系列是用highcharts数据处理功能制作的，制作完成后我不知道如何定位它们。我尝试过:

开关 (plotOptions.series.name) {
案例“DACH - 奥地利、德国和瑞士”:
$(this.hide());
休息;
}

但它不会工作。关于如何做到这一点有什么想法吗？我想写一个开关，因为 8/13 系列应该默认禁用...下面的 fiddle

            $("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
                      }
                    });
                  });
                  switch (plotOptions.series.name) {
                    case "DACH - Austria, Germany and Switzerland":
                      $(this.hide());
                      break;
                  }

                });
              })
              .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>

Answer 1

您可以使用chart.events.load来做到这一点:

chart: {
    events: {
        load: function () {
            var theSeries = this.series;
            $.each(theSeries, function () {
                if (this.index > 0) {
                    this.setVisible(false);
                }
            });
        }
    }
}

此示例仅检查系列的索引是否大于 0 并将可见性设置为 false，以便只有第一个系列在图表上可见。您可以根据需要添加其他检查(例如 this.name)。