时间戳

首页 > 解决方案 > 同一页面上的多个“脚本 src”导致排序功能在 HighCharts 上不起作用

javascript - 同一页面上的多个“脚本 src”导致排序功能在 HighCharts 上不起作用

问题描述

我已经隔离了我的问题，但无法解决它。我希望堆栈溢出的聪明才智可以提供帮助！

问题： 当注入的表存在时，排序功能停止工作。当我移除注射时，排序功能完美运行。有没有办法让我隔离脚本 src 所以它只适用于注入的图表？试图在 highcharts 不起作用之前引用它们。

我的页面： http ://www.wcsddata.net/wearewcsd

在页面的开头，我引用了以下脚本，因此，我的 highcharts 将在页面底部的选项卡中工作：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>

在顶部，我有 4 个图表已通过 everviz 注入页面并使用“script srce”：

<div id="highcharts-fvqBbZn4G" style="width: 100%; height: 220px; float: left; padding-bottom: 40px;"><script src="https://app.everviz.com/inject/fvqBbZn4G/" defer="defer"></script></div>
<div id="highcharts-AMGYgGD6V" style="width: 34%; height: 300px; float: left;"><script src="https://app.everviz.com/inject/AMGYgGD6V/" defer="defer"></script></div>
<div id="highcharts-pEyKRkM-l" style="width: 33%; height: 300px; float: left;"><script src="https://app.everviz.com/inject/pEyKRkM-l/" defer="defer"></script></div>
<div id="highcharts-USL8gYv5J" style="width: 33%; height: 300px; float: left;"><script src="https://app.everviz.com/inject/USL8gYv5J/" defer="defer"></script></div>

在底部，我有包含 8 个不同的高图的标签集，其中许多具有排序的能力（按字母顺序，低-高和高-低）。以下是其中之一的代码：

<script>
var categories = ['AACT', 'Allen', 'Anderson', 'Beasley', 'Beck', 'Bennett', 'Billinghurst', 'Booth', 'Brown', 'Cannan', 'Caughlin Ranch', 'Clayton', 'Cold Springs', 'Corbett', 'Damonte Ranch', 'Depoali', 'Desert Heights', 'Desert Skies', 'Diedrichsen', 'Dilworth', 'Dodson', 'Donner Springs', 'Double Diamond', 'Drake', 'Duncan', 'Dunn', 'Elmcrest', 'Galena', 'Gerlach K-12', 'Gomes', 'Gomm', 'Greenbrae', 'Hall', 'Hidden Valley', 'Huffaker', 'Hug', 'Hunsberger', 'Hunter Lake', 'Incline ES', 'Incline HS', 'Incline MS', 'Innovations', 'Inspire', 'Juniper', 'Lemelson', 'Lemmon Valley', 'Lenz', 'Lincoln Park', 'Loder', 'Mathews', 'Maxwell', 'McQueen', 'Melton', 'Mendive', 'Mitchell', 'Moss', 'Mount Rose K-8', 'Natchez', 'North Star', 'North Valleys', 'OBrien', 'Palmer', 'Peavine', 'Picollo', 'Pine', 'Pleasant Valley', 'Poulakidas', 'Reed', 'Reno', 'Risley', 'Sepulveda', 'Shaw', 'Silver Lake', 'Sky Ranch', 'Smith Alice', 'Smith Kate', 'Smithridge', 'Spanish Springs ES', 'Spanish Springs HS', 'Sparks HS', 'Sparks MS', 'Stead', 'Sun Valley', 'Swope', 'Taylor', 'TMCC HS', 'Towles', 'Traner', 'Turning Point', 'Van Gorder', 'Vaughn', 'Verdi', 'Veterans', 'Warner', 'Westergard', 'Whitehead', 'Winnemucca', 'Wooster'];
Highcharts.chart('containerfrlschl', {
  chart: {
    type: 'bar',
    events: {
      load: function() {
        var points = this.series[0].points,
          chart = this,
          newPoints = [];
        Highcharts.each(points, function(point, i) {
          point.update({
            name: categories[i]
          }, false);
          newPoints.push({
            x: point.x,
            y: point.y,
            name: point.name
          });
        });
        chart.redraw();
        // Sorting A - Z
        $('#sort7').on('click', function() {
          newPoints.sort(function(a, b) {
            if (a.name < b.name)
              return -1;
            if (a.name > b.name)
              return 1;
            return 0;
          });
          Highcharts.each(newPoints, function(frl, i) {
            frl.x = i;
          });
          chart.series[0].setData(newPoints, true, false, false);
        });
        // Sorting min - max
        $('#sort8').on('click', function() {
          newPoints.sort(function(a, b) {
            return a.y - b.y
          });
          Highcharts.each(newPoints, function(frl, i) {
            frl.x = i;
          });
          chart.series[0].setData(newPoints, true, false, false);
        });
        // Sorting max - min
        $('#sort9').on('click', function() {
          newPoints.sort(function(a, b) {
            return b.y - a.y
          });
          Highcharts.each(newPoints, function(frl, i) {
            frl.x = i;
          });
          chart.series[0].setData(newPoints, true, false, false);
        });
      }
    }
  },
  exporting: {
        enabled: false
    },
  title:{
        text:''
    },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    min: 0,
    max: 100,
    title: {
      text: 'Percentage of Student Population'
    }
  },
  tooltip: {
    valueSuffix: '%'
  },
credits: {
      enabled: false
  },
  legend: {
    enabled: false,
    reversed: true,
    align: 'center',
    verticalAlign: 'top',
    itemDistance: 20,
    itemStyle: {
      "font-family": "'Open Sans', sans-serif",
      "color": "#373737",
      "fontSize": "16px",
      "fontWeight": "normal"
    }
  },
  plotOptions: {
    series: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        filter: {
          property: 'percentage',
          operator: '>',
          value: 1
        },
        style: {
          "font-family": "'Open Sans', sans-serif",
          "color": "#ffffff",
          "fontSize": "14px",
          "fontWeight": "normal",
          "textOutline": false
        },
        format: '{point.y}%'
      }
    }
  },
  series: [{
    name: 'FRL',
    color: '#00619e',
    data: [19, 100, 100, 25, 28, 100, 26, 100, 15, 100, 9, 49, 43, 100, 24, 21, 100, 100, 45, 100, 100, 59, 38, 100, 100, 55, 100, 30, 32, 41, 10, 100, 29, 53, 32, 100, 4, 47, 45, 41, 46, 45, 100, 57, 100, 100, 9, 100, 100, 100, 100, 24, 11, 40, 100, 35, 35, 100, 28, 44, 58, 100, 52, 100, 50, 19, 12, 28, 19, 100, 30, 21, 50, 23, 100, 100, 100, 13, 27, 60, 100, 100, 100, 27, 23, 18, 45, 100, 100, 13, 100, 24, 100, 100, 21, 36, 37, 52]
  }]
});</script>

先感谢您！肯

标签： javascripthtmlhighcharts

解决方案

我发现这是everviz图表和 Highcharts 图表集成之间的普遍问题。出现此问题是因为everviz包含所有 Highcharts 模块并且在主图表上进行更新使得该图表“想要访问”这些模块，但分配的参数是错误的。

添加缺少的模块（在这种情况下为 highcharts-more和可访问性）解决了这个问题。

演示：https ://jsfiddle.net/BlackLabel/tqfp79c1/

<div id="highcharts-fvqBbZn4G" style="width: 100%; height: 220px; float: left; padding-bottom: 40px;"><script src="https://app.everviz.com/inject/fvqBbZn4G/" defer="defer"></script></div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

推荐阅读