Highcharts我已经失去了向下钻取滚动条

时间:2018-11-01 17:30:14

标签: highcharts

因此,我很想将图表提高到令人敬畏的水平,但是当深入到详细数据时,我一直迷失了滚动条。它曾经可以完美地工作,现在只显示它可以容纳在观看区域中的任何数量,并且就像其他人不在那儿一样。

我已经能够在以下JSFiddle中重新创建问题:https://jsfiddle.net/BigSexy/qx5uzdf6/38/

  var categoriesSL = ['Elementary', 'Middle', 'High'];
  var categoriesElem = ["Ack/Bingham (E)", "Ackerly (E)", "AR Kennedy", "Atkinson", "Auburndale", "Audubon", "Bates", "Bellewood (E)", "Binet (E)", "Blake"];
  var categoriesMid = ["Ack/Bingham (M)", "Ackerly (M)", "Barret", "Bellewood (M)", "Binet (M)", "Boys Haven (M)", "Brook-Dupont (M)", "Brook-KMI (M)", "Brooklawn (M)", "Brown (M)"];
  var categoriesHigh = ["Ack/Bingham (H)", "Ackerly (H)", "Atherton", "Ballard", "Bellewood (H)", "Binet (H)", "Boys Haven (H)", "Breck-Metro", "Brook-KMI (H)", "Brooklawn (H)"]
  refChart = new Highcharts.chart('ctReferrals', {
    chart: {
      backgroundColor: 'whiteSmoke',
      events: {
        drilldown: function() {
          switch (this.ddDupes[0]) {
            case 'elem':
            case 'elem2':
              refChart.xAxis[0].setCategories(categoriesElem);
              break;
            case 'mid':
            case 'mid2':
              refChart.xAxis[0].setCategories(categoriesMid);
              break;
            case 'high':
            case 'high2':
              refChart.xAxis[0].setCategories(categoriesHigh);
              break;
            default:
              break;
          }

          refChart.xAxis[0].update({
            max: 5
          }, true);

          console.log('scroll!');
          this.update({
            scrollbar: {
              enabled: true,
            }
          }, false);
        },
        drillupall: function() {
          refChart.xAxis[0].setCategories(categoriesSL);
          refChart.xAxis[0].update({
            max: 2
          }, true);

          console.log('dont scroll!');
          this.update({
            scrollbar: {
              enabled: false
            }
          }, false);
        }
      },
      type: 'column',
    },
    title: {
      text: 'Total # of Referrals by School Level'
    },
    subtitle: {
      text: 'By Year'
    },
    xAxis: {
      categories: categoriesSL,
      min: 0,
      max: 2,
    },
    yAxis: [{
      title: {
        useHtml: true,
        text: '<strong># Referrals</strong>'
      }
    }],
    tooltip: {
      shared: true,
    },
    plotOptions: {
      column: {
        borderRadius: 5,
        dataLabels: {
          enabled: true,
        },
      }
    },
    series: [{
      name: '2017-18',
      data: [{
        color: '#7cb5ec',
        drilldown: 'elem',
        y: 13734
      }, {
        color: '#7cb5ec',
        drilldown: 'mid',
        y: 11999
      }, {
        color: '#7cb5ec',
        drilldown: 'high',
        y: 21245
      }]
    }, {
      name: '2018-19',
      data: [{
        color: '#90ed7d',
        drilldown: 'elem2',
        y: 12500
      }, {
        color: '#90ed7d',
        drilldown: 'mid2',
        y: 10617
      }, {
        color: '#90ed7d',
        drilldown: 'high2',
        y: 21044
      }]
    }],
    drilldown: {
      allowPointDrilldown: false,
      series: [{
        id: 'elem',
        name: '2017-18',
        data: [{
            schoolLevel: "01",
            schoolID_alt: "993",
            color: "#7cb5ec",
            drilldown: "elem",
            y: 0
          },
          {
            schoolLevel: "01",
            schoolID_alt: "990",
            color: "#7cb5ec",
            drilldown: "elem",
            y: 0
          },
          {
            schoolLevel: "01",
            schoolID_alt: "194",
            color: "#7cb5ec",
            drilldown: "elem",
            y: 5
          },
          {
            schoolLevel: "01",
            schoolID_alt: "117",
            color: "#7cb5ec",
            drilldown: "elem",
            y: 562
          },
          {
            schoolLevel: "01",
            schoolID_alt: "92",
            color: "#7cb5ec",
            drilldown: "elem",
            y: 88
          },
          {
            schoolLevel: "01",
            schoolID_alt: "30",
            color: "#7cb5ec",
            drilldown: "elem",
            y: 48
          },
          {
            schoolLevel: "01",
            schoolID_alt: "39",
            color: "#7cb5ec",
            drilldown: "elem",
            y: 51
          },
          {
            schoolLevel: "01",
            schoolID_alt: "989",
            color: "#7cb5ec",
            drilldown: "elem",
            y: 0
          },
          {
            schoolLevel: "01",
            schoolID_alt: "932",
            color: "#7cb5ec",
            drilldown: "elem",
            y: 271
          },
          {
            schoolLevel: "01",
            schoolID_alt: "103",
            color: "#7cb5ec",
            drilldown: "elem",
            y: 282
          },
          {
            schoolLevel: "01",
            schoolID_alt: "123",
            color: "#7cb5ec",
            drilldown: "elem",
            y: 44
          }
        ]
      }, {
        id: 'elem2',
        name: '2018-19',
        data: [{
            schoolLevel: "01",
            schoolID_alt: "993",
            color: "#fdfd96",
            drilldown: "elem2",
            y: 0
          },
          {
            schoolLevel: "01",
            schoolID_alt: "990",
            color: "#fdfd96",
            drilldown: "elem2",
            y: 0
          },
          {
            schoolLevel: "01",
            schoolID_alt: "194",
            color: "#ff6961",
            drilldown: "elem2",
            y: 43
          },
          {
            schoolLevel: "01",
            schoolID_alt: "117",
            color: "#90ed7d",
            drilldown: "elem2",
            y: 178
          },
          {
            schoolLevel: "01",
            schoolID_alt: "92",
            color: "#90ed7d",
            drilldown: "elem2",
            y: 83
          },
          {
            schoolLevel: "01",
            schoolID_alt: "30",
            color: "#90ed7d",
            drilldown: "elem2",
            y: 9
          },
          {
            schoolLevel: "01",
            schoolID_alt: "39",
            color: "#ff6961",
            drilldown: "elem2",
            y: 103
          },
          {
            schoolLevel: "01",
            schoolID_alt: "989",
            color: "#ff6961",
            drilldown: "elem2",
            y: 33
          },
          {
            schoolLevel: "01",
            schoolID_alt: "932",
            color: "#ff6961",
            drilldown: "elem2",
            y: 322
          },
          {
            schoolLevel: "01",
            schoolID_alt: "103",
            color: "#90ed7d",
            drilldown: "elem2",
            y: 74
          },
          {
            schoolLevel: "01",
            schoolID_alt: "123",
            color: "#ff6961",
            drilldown: "elem2",
            y: 57
          }
        ]
      }, {
        id: 'mid',
        name: '2017-18',
        data: [{
            schoolLevel: "02",
            schoolID_alt: "994",
            color: "#7cb5ec",
            drilldown: "mid",
            y: 0
          },
          {
            schoolLevel: "02",
            schoolID_alt: "925",
            color: "#7cb5ec",
            drilldown: "mid",
            y: 0
          },
          {
            schoolLevel: "02",
            schoolID_alt: "28",
            color: "#7cb5ec",
            drilldown: "mid",
            y: 27
          },
          {
            schoolLevel: "02",
            schoolID_alt: "930",
            color: "#7cb5ec",
            drilldown: "mid",
            y: 0
          },
          {
            schoolLevel: "02",
            schoolID_alt: "933",
            color: "#7cb5ec",
            drilldown: "mid",
            y: 178
          },
          {
            schoolLevel: "02",
            schoolID_alt: "936",
            color: "#7cb5ec",
            drilldown: "mid",
            y: 2
          },
          {
            schoolLevel: "02",
            schoolID_alt: "917",
            color: "#7cb5ec",
            drilldown: "mid",
            y: 0
          },
          {
            schoolLevel: "02",
            schoolID_alt: "940",
            color: "#7cb5ec",
            drilldown: "mid",
            y: 0
          },
          {
            schoolLevel: "02",
            schoolID_alt: "943",
            color: "#7cb5ec",
            drilldown: "mid",
            y: 1
          },
          {
            schoolLevel: "02",
            schoolID_alt: "904",
            color: "#7cb5ec",
            drilldown: "mid",
            y: 25
          },
          {
            schoolLevel: "02",
            schoolID_alt: "113",
            color: "#7cb5ec",
            drilldown: "mid",
            y: 677
          }
        ]
      }, {
        id: 'mid2',
        name: '2018-19',
        data: [{
            schoolLevel: "02",
            schoolID_alt: "994",
            color: "#fdfd96",
            drilldown: "mid2",
            y: 0
          },
          {
            schoolLevel: "02",
            schoolID_alt: "925",
            color: "#fdfd96",
            drilldown: "mid2",
            y: 0
          },
          {
            schoolLevel: "02",
            schoolID_alt: "28",
            color: "#ff6961",
            drilldown: "mid2",
            y: 37
          },
          {
            schoolLevel: "02",
            schoolID_alt: "930",
            color: "#fdfd96",
            drilldown: "mid2",
            y: 0
          },
          {
            schoolLevel: "02",
            schoolID_alt: "933",
            color: "#90ed7d",
            drilldown: "mid2",
            y: 80
          },
          {
            schoolLevel: "02",
            schoolID_alt: "936",
            color: "#ff6961",
            drilldown: "mid2",
            y: 6
          },
          {
            schoolLevel: "02",
            schoolID_alt: "917",
            color: "#ff6961",
            drilldown: "mid2",
            y: 1
          },
          {
            schoolLevel: "02",
            schoolID_alt: "940",
            color: "#fdfd96",
            drilldown: "mid2",
            y: 0
          },
          {
            schoolLevel: "02",
            schoolID_alt: "943",
            color: "#ff6961",
            drilldown: "mid2",
            y: 35
          },
          {
            schoolLevel: "02",
            schoolID_alt: "904",
            color: "#90ed7d",
            drilldown: "mid2",
            y: 6
          },
          {
            schoolLevel: "02",
            schoolID_alt: "113",
            color: "#90ed7d",
            drilldown: "mid2",
            y: 625
          }
        ]
      }, {
        id: 'high',
        name: '2017-18',
        data: [{
            schoolLevel: "03",
            schoolID_alt: "995",
            color: "#7cb5ec",
            drilldown: "high",
            y: 0
          },
          {
            schoolLevel: "03",
            schoolID_alt: "926",
            color: "#7cb5ec",
            drilldown: "high",
            y: 0
          },
          {
            schoolLevel: "03",
            schoolID_alt: "11",
            color: "#7cb5ec",
            drilldown: "high",
            y: 1322
          },
          {
            schoolLevel: "03",
            schoolID_alt: "80",
            color: "#7cb5ec",
            drilldown: "high",
            y: 604
          },
          {
            schoolLevel: "03",
            schoolID_alt: "931",
            color: "#7cb5ec",
            drilldown: "high",
            y: 0
          },
          {
            schoolLevel: "03",
            schoolID_alt: "934",
            color: "#7cb5ec",
            drilldown: "high",
            y: 553
          },
          {
            schoolLevel: "03",
            schoolID_alt: "937",
            color: "#7cb5ec",
            drilldown: "high",
            y: 12
          },
          {
            schoolLevel: "03",
            schoolID_alt: "938",
            color: "#7cb5ec",
            drilldown: "high",
            y: 725
          },
          {
            schoolLevel: "03",
            schoolID_alt: "941",
            color: "#7cb5ec",
            drilldown: "high",
            y: 0
          },
          {
            schoolLevel: "03",
            schoolID_alt: "944",
            color: "#7cb5ec",
            drilldown: "high",
            y: 0
          },
          {
            schoolLevel: "03",
            schoolID_alt: "905",
            color: "#7cb5ec",
            drilldown: "high",
            y: 52
          }
        ]
      }, {
        id: 'high2',
        name: '2018-19',
        data: [{
            schoolLevel: "03",
            schoolID_alt: "995",
            color: "#fdfd96",
            drilldown: "high2",
            y: 0
          },
          {
            schoolLevel: "03",
            schoolID_alt: "926",
            color: "#fdfd96",
            drilldown: "high2",
            y: 0
          },
          {
            schoolLevel: "03",
            schoolID_alt: "11",
            color: "#90ed7d",
            drilldown: "high2",
            y: 1079
          },
          {
            schoolLevel: "03",
            schoolID_alt: "80",
            color: "#90ed7d",
            drilldown: "high2",
            y: 548
          },
          {
            schoolLevel: "03",
            schoolID_alt: "931",
            color: "#fdfd96",
            drilldown: "high2",
            y: 0
          },
          {
            schoolLevel: "03",
            schoolID_alt: "934",
            color: "#ff6961",
            drilldown: "high2",
            y: 647
          },
          {
            schoolLevel: "03",
            schoolID_alt: "937",
            color: "#ff6961",
            drilldown: "high2",
            y: 13
          },
          {
            schoolLevel: "03",
            schoolID_alt: "938",
            color: "#ff6961",
            drilldown: "high2",
            y: 823
          },
          {
            schoolLevel: "03",
            schoolID_alt: "941",
            color: "#fdfd96",
            drilldown: "high2",
            y: 0
          },
          {
            schoolLevel: "03",
            schoolID_alt: "944",
            color: "#ff6961",
            drilldown: "high2",
            y: 81
          },
          {
            schoolLevel: "03",
            schoolID_alt: "905",
            color: "#90ed7d",
            drilldown: "high2",
            y: 3
          }
        ]
      }]
    },
    exporting: {
      scale: 2,
      chartOptions: {
        xAxis: [{
          categories: categoriesElem,
          min: 0,
          max: categoriesElem.length
        }]
      }

    },
    credits: {
      enabled: false
    }
  })

  $(function() {
    (function(H) {
      //DATALABELS
      H.wrap(H.Series.prototype, 'drawDataLabels', function(proceed) {
        var css = this.chart.options.drilldown.activeDataLabelStyle;
        proceed.call(this);

        css.textDecoration = 'none';
        css.fontWeight = 'bold';
        css.cursor = 'default';
        css.color = 'black';

        H.each(this.points, function(point) {
          if (point.drilldown && point.dataLabel) {
            point.dataLabel
              .css(css)
              .on('click', function() {
                return false;
              });
          }
        });
      });
    })(Highcharts);
  })

如果有帮助,以下是指向实际图形的链接:https://assessment.jefferson.kyschools.us/DMC/District%20Datacard/ddReferrals

您能提供的任何帮助将不胜感激

1 个答案:

答案 0 :(得分:0)

您使用了Highcharts源代码:

<script src="https://code.highcharts.com/highcharts.js"></script>

滚动条功能仅适用于Highstock:

<script src="https://code.highcharts.com/stock/highstock.js"></script>

实时演示:https://jsfiddle.net/BlackLabel/a126pnxv/