Highchart drilldown和drillup 2次，列将被切断

时间：2018-02-16 08:35:20

标签： highcharts

我在钻取和钻取2次时遇到问题，列将被切断。

$(function() {

  var series = [{
    "color": "#4D94FF",
    "data": [{
      "y": 16900.6037097732,
      drilldown: true
    }, {
      "y": 16598.1127253779,
      drilldown: true
    }, {
      "y": 16258.989480705406,
      drilldown: true
    }, {
      "y": 16248.5235795968,
      drilldown: true
    }, {
      "y": 16193.565467835093,
      drilldown: true
    }, {
      "y": 16024.382188677004,
      drilldown: true
    }, {
      "y": 15939.296911716798,
      drilldown: true
    }, {
      "y": 15878.156538128704,
      drilldown: true
    }, {
      "y": 15859.042314678803,
      drilldown: true
    }, {
      "y": 15849.380712985894,
      drilldown: true
    }, {
      "y": 15631.992957442704,
      drilldown: true
    }, {
      "y": 15231.375360610198,
      drilldown: true
    }, {
      "y": 15177.678970454403,
      drilldown: true
    }, {
      "y": 15138.9262791871,
      drilldown: true
    }, {
      "y": 14907.178343607397,
      drilldown: true
    }, {
      "y": 14712.1957852833,
      drilldown: true
    }, {
      "y": 14604.5089572668,
      drilldown: true
    }, {
      "y": 14566.970745146,
      drilldown: true
    }, {
      "y": 14293.398250609893,
      drilldown: true
    }, {
      "y": 14152.719995200001,
      drilldown: true
    }, {
      "y": 14134.626426503697,
      drilldown: true
    }, {
      "y": 13932.180859923708,
      drilldown: true
    }, {
      "y": 13790.796702384303,
      drilldown: true
    }, {
      "y": 13695.544447660202,
      drilldown: true
    }, {
      "y": 13592.867697953701,
      drilldown: true
    }, {
      "y": 13438.378718139,
      drilldown: true
    }, {
      "y": 13188.681403070605,
      drilldown: true
    }, {
      "y": 13109.667549848804,
      drilldown: true
    }, {
      "y": 13059.584681272194,
      drilldown: true
    }, {
      "y": 13000.372347950506,
      drilldown: true
    }, {
      "y": 12813.297465918698,
      drilldown: true
    }, {
      "y": 12532.475437284096,
      drilldown: true
    }, {
      "y": 12515.3238663081,
      drilldown: true
    }, {
      "y": 12462.217596782904,
      drilldown: true
    }, {
      "y": 12193.2304492299,
      drilldown: true
    }, {
      "y": 11967.110670820603,
      drilldown: true
    }, {
      "y": 11766.267797112201,
      drilldown: true
    }, {
      "y": 11688.796452044002,
      drilldown: true
    }, {
      "y": 11676.0905818916,
      drilldown: true
    }, {
      "y": 11542.720954126396,
      drilldown: true
    }, {
      "y": 11524.478820919496,
      drilldown: true
    }, {
      "y": 11176.910431652994,
      drilldown: true
    }, {
      "y": 11148.9910212459,
      drilldown: true
    }, {
      "y": 11147.984512210307,
      drilldown: true
    }, {
      "y": 11036.183924155506,
      drilldown: true
    }, {
      "y": 11028.906307756699,
      drilldown: true
    }, {
      "y": 10924.515023171602,
      drilldown: true
    }, {
      "y": 10870.417462228703,
      drilldown: true
    }, {
      "y": 10794.527314604702,
      drilldown: true
    }, {
      "y": 10711.816713451695,
      drilldown: true
    }, {
      "y": 10647.2742567055,
      drilldown: true
    }, {
      "y": 10245.294984622598,
      drilldown: true
    }, {
      "y": 10159.2771334649,
      drilldown: true
    }, {
      "y": 9746.344335019592,
      drilldown: true
    }, {
      "y": 9588.249892114301,
      drilldown: true
    }, {
      "y": 9457.898081183495,
      drilldown: true
    }, {
      "y": 9439.750602872802,
      drilldown: true
    }, {
      "y": 9419.698462570595,
      drilldown: true
    }, {
      "y": 9384.5649919506,
      drilldown: true
    }, {
      "y": 9349.794785022399,
      drilldown: true
    }, {
      "y": 9345.9970427974,
      drilldown: true
    }, {
      "y": 9333.461412205797,
      drilldown: true
    }, {
      "y": 9025.358668211804,
      drilldown: true
    }, {
      "y": 8971.495120078502,
      drilldown: true
    }, {
      "y": 8848.795317591103,
      drilldown: true
    }, {
      "y": 8800.908385901705,
      drilldown: true
    }, {
      "y": 8737.5662531284,
      drilldown: true
    }, {
      "y": 8678.7351885136,
      drilldown: true
    }, {
      "y": 8456.7764961048,
      drilldown: true
    }, {
      "y": 8311.562995553999,
      drilldown: true
    }, {
      "y": 8089.600704193201,
      drilldown: true
    }, {
      "y": 7932.7021273966,
      drilldown: true
    }, {
      "y": 7804.2916799635,
      drilldown: true
    }, {
      "y": 7665.482617346795,
      drilldown: true
    }, {
      "y": 7545.366637899508,
      drilldown: true
    }, {
      "y": 7523.392442792501,
      drilldown: true
    }, {
      "y": 7422.4791104775,
      drilldown: true
    }, {
      "y": 7277.150820999399,
      drilldown: true
    }, {
      "y": 6813.364086545702,
      drilldown: true
    }, {
      "y": 6810.916735649401,
      drilldown: true
    }, {
      "y": 6497.3502318857,
      drilldown: true
    }, {
      "y": 6456.528889776102,
      drilldown: true
    }, {
      "y": 5989.065391362199,
      drilldown: true
    }, {
      "y": 5930.785978138099,
      drilldown: true
    }, {
      "y": 5550.153407216101,
      drilldown: true
    }, {
      "y": 5363.220678388802,
      drilldown: true
    }, {
      "y": 5231.219058841301,
      drilldown: true
    }, {
      "y": 5090.3239122032,
      drilldown: true
    }, {
      "y": 4838.792917356903,
      drilldown: true
    }, {
      "y": 4831.680135994997,
      drilldown: true
    }, {
      "y": 4811.924926727499,
      drilldown: true
    }, {
      "y": 4658.4734687807,
      drilldown: true
    }, {
      "y": 3072.9029491395,
      drilldown: true
    }, {
      "y": 3045.4683175089,
      drilldown: true
    }, {
      "y": 2923.221351564,
      drilldown: true
    }, {
      "y": 2627.7834042233994,
      drilldown: true
    }, {
      "y": 2555.6538610446996,
      drilldown: true
    }, {
      "y": 2295.7969994545997,
      drilldown: true
    }, {
      "y": 2083.750450286002,
      drilldown: true
    }, {
      "y": 1042.7531691782997,
      drilldown: true
    }, {
      "y": 600.8115959168999,
      drilldown: true
    }, {
      "y": 367.57857791260005,
      drilldown: true
    }, {
      "y": 215.2800102234,
      drilldown: true
    }, {
      "y": 173.26539802559998,
      drilldown: true
    }, {
      "y": 115.9506267755,
      drilldown: true
    }, {
      "y": 111.3006117336,
      drilldown: true
    }, {
      "y": 106.3389907677,
      drilldown: true
    }, {
      "y": 90.6992223262,
      drilldown: true
    }, {
      "y": 78.10283124449998,
      drilldown: true
    }, {
      "y": 76.0523023606,
      drilldown: true
    }, {
      "y": 60.6059997679,
      drilldown: true
    }, {
      "y": 60.306639909699996,
      drilldown: true
    }, {
      "y": 48.5610792629,
      drilldown: true
    }, {
      "y": 44.905503748200005,
      drilldown: true
    }, {
      "y": 38.2437795848,
      drilldown: true
    }, {
      "y": 28.2788424492,
      drilldown: true
    }, {
      "y": 25.900499820700002,
      drilldown: true
    }, {
      "y": 19.516943574000003,
      drilldown: true
    }, {
      "y": 14.662200450899999,
      drilldown: true
    }, {
      "y": 8.3534003496,
      drilldown: true
    }, {
      "y": 7.6086006463,
      drilldown: true
    }, {
      "y": 4.0950002671,
      drilldown: true
    }, {
      "y": 2.0880999565,
      drilldown: true
    }, {
      "y": 1.670040071,
      drilldown: true
    }, {
      "y": 0.418789953,
      drilldown: true
    }, {
      "y": 0.4134699926,
      drilldown: true
    }, {
      "y": 0.0074499843,
      drilldown: true
    }, {
      "y": 2.0880000000000002e-07,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": 0,
      drilldown: true
    }, {
      "y": -1.3704e-06,
      drilldown: true
    }, {
      "y": -6.6820799112,
      drilldown: true
    }],
    "id": "something",
    "name": "Value"
  }];

  var assetNames = ["Brad 4-12H ", "KRETCHMAR_5-30H_", "Rock 1-16H ", "Martin TR 1-21H ", "Heidi 1-23H ", "Harriet 1-8H ", "RONCK_2-27H_", "Ward 2-34H ", "Conrady 2-14H ", "HUDSON_3-23H_", "Kay 1-24H ", "Boyer 1-36H ", "HOFFMAN_1-16H_", "Kim 2-32H ", "Thomason 2-2H ", "WILDLIFE_1-9H_", "Heidi 3-23H ", "Hazel 1-24H ", "Timberlake 2-16H ", "Ward 3-34H ", "Kilian 1-7H ", "Stafford 1-25H ", "Rickabaugh 1-2H ", "Iva Woods 1-20H ", "Hudson 2-23H ", "BLACKBIRD_3-13H_", "MEANS_3-25H_", "Hoffman 2-16H ", "JOAN_MAR_3-20H_", "RAGAN_2-22H_", "TC_FARMS_1-14H_", "Jennifer 6-34H ", "Clark Trust 4-11H ", "MYRTLE_1-21H_", "Dexter 3-8H ", "BARNARD_3-30H_", "LAUER_1-14H_", "DRACO_2-24H_", "Betty 1-14H ", "Raymond 1-7H ", "Ava Rose 2305 1-16H ", "PHILLIPS_2-22H_", "Wildlife 3-9H ", "Hankey 1-14H ", "Patrick 1-30H ", "Schantz 1-35H ", "KENO_CREEK_1-26H_", "Conrady 1-14H ", "Norma 1-25H ", "Deana 3-24H ", "Lauer 2-14H ", "ROSE_1-20H_", "LIVESTOCK_2-25H_", "CA_2-27H_", "NOEMI_1-30H_", "Beckham 2-15H ", "Haunschild 2-34H ", "Brown 1-26H ", "LAUER_3-14H_", "STEPP_2-19H_", "Oliver 1-14H ", "CA 2820 1-27H ", "JUDY_1-20H_", "Sandy Creek 2-2H ", "CANFIELD_1-23H_", "KENO_CREEK_3-26H_", "Trenton 2-12H ", "Simpson Trust 2-27H ", "Lillian 3-31H ", "JOAN_MAR_2-20H_", "ELMER_2-4H_", "Riley 1-9H ", "Noble 2-16H ", "BLISS_FAM_1-21H_", "Keno Creek 2-26H ", "Gilbert 3-24H ", "Brad 2-12H ", "SANDY_2-19H_", "Patricia 1-7H ", "NOEMI_3-30H_", "Ragan 3-22H ", "Larry 1-29H ", "DAVIS_1-13H_", "Zaloudek 2-24H ", "Hudson 1-23H ", "PETRIK_1-22H_", "Saratoga 3-25H ", "Red Fern 2-16H ", "HUGHES 1-10H", "Gilbert 1-24H ", "SARATOGA_1-25H_", "LIT Trust 5-14H ", "Sean 3-18H ", "Randy 4-19H ", "Molly 1-14H ", "Shrack 1-28H ", "SANDY_1-19H_", "Thomason 1-2H ", "ELMER_1-4H_", "Bird 3-6 ", "Rose 2-20H ", "Victor 1-19H ", "HENSLEE_1-16H_", "Jennie 2-10H ", "William 2-11H ", "Yazel 1-3H ", "Forster 1-8H ", "Jennifer 2-34H ", "William 3-11H ", "Bryant 6-10H ", "Allen 1-5H ", "LIT Trust 1-14H ", "Lori 2-2H ", "Bryant 5-10H ", "Sean 4-18H ", "KIMMY_1-26H_", "Harold 1-26H ", "Lee 2-34H ", "Hoffman 3-16H ", "Liebhart 1-35H ", "Britt 4-20H ", "JoAnn 2-8H ", "Lana 1-1A ", "PAUL_1-24H_", "Ferris 1-5H ", "Hazel 2-24H ", "Sarah 2-34H ", "Harlow 1-28H ", "Cormack 1-30H ", "Yost 1-33H ", "Rahm 1-3H ", "Lee 1-34H ", "Donna Mae 1-23H ", "Gabriel 1-36H ", "Faldtz 1-26H ", "Toews 1-28H ", "Ellis 3-19H ", "NADOLA_4-25H_", "Coach 1-26H ", "Ky 1-34H ", "Kathleen 1-1H ", "RENBARGER_4-12H_", "Montgomery 2-7H ", "Perth 2-1H ", "VICKIE_1-33H_", "Gurney Trust 2-27H ", "Barbara 1-9H ", "South Point Farms 1-17H ", "Starks Trust 1-21H ", "Myra 1-8H ", "Powers 3-2H ", "Nokes 1-35H ", "Tasset 1-34H ", "Boardwalk 2-6H ", "Michael 1-20H ", "Brent 2-6H ", "Appaloosa 2-3H ", "Isaac Farms 1-36H ", "Britt 3-20H ", "NADOLA_3-25H_", "Lawyer 2629 1-30H ", "Miller Trust 1-27H ", "Bones 2821 1-11H ", "Dexter 4-8H ", "Garlow 2-16H ", "RENBARGER_2-12H_", "SHAFER_1-21H_", "JAMES_1-9H_", "LIT Trust 2-14H ", "Bowen 4-34H ", "Powers 1-2H ", "Bleumer 2-13H ", "Clark Trust 2-11H ", "Clark Trust 3-11H ", "Wood 1-17H ", "Bobek 1-22H ", "Sandy Creek 1-2H ", "Noble 1-16H ", "Daniell 1-17H ", "Marks 1-24H ", "Robb 2-16H ", "Fox 3-26H ", "Millershaski 1-15H ", "WATKINS_1-14H_", "STAHL_1-2H_", "Lori A 1-15H ", "Miller 2-3H ", "James 1-4H ", "John 3404 1-20H ", "Kenneth 2-11H ", "Appaloosa 3-3H ", "Lorimer 1-9H ", "Murray 2-5H ", "Bernice 1-17H ", "Schwab 2-29H ", "James 2922 1-13H ", "Unruh 2-17H ", "CONRADY_4-14H_", "PARR_3-36H_", "WAYNE_1-14H_", "Conrady 3-14H ", "SARATOGA_2-25H_", "Richard 3-30H ", "Sutton 3-3H ", "CMG_1-35H_", "James 2-4H ", "Herschelle 1-10H ", "TC Farms 2-14H "];

  var theChart = {
    chart: {
      type: 'column',
      height: 300,
      spacingTop: 20,
      spacingBottom: 50,
      spacingLeft: 20,
      spacingRight: 20,
      style: {
        fontFamily: '"open_sansregular", sans-serif'
      },
      events: {

        drilldown: function(e) {
          this.setTitle({
            text: e.point.name
          });

          this.update({
            scrollbar: {
              enabled: false
            }
          });
          this.xAxis[0].update({
            max: 5
          });
          this.addSeriesAsDrilldown(e.point, {
            data: [5, 10]
          });

        },
        drillup: function(e) {
          // shouldn't hit this
          this.setTitle({
            text: 'title'
          });
          this.update({
            scrollbar: {
              enabled: true
            }
          });
          this.xAxis[0].update({
            max: 50
          });
        }
      }
    },
    title: {
      text: ''
    },
    xAxis: {
      type: 'category',
      categories: assetNames,
      lineColor: '#000000',
      scrollbar: {
        enabled: true
      },
      tickColor: '#000000',
      tickLength: 5,
      max: 50,
      range: 50,
    },
    yAxis: {
      title: {
        enabled: false
      },
      lineColor: '#000000',
      gridLineWidth: 1,
      gridLineColor: '#D8D8D8',
      tickColor: '#000000',
      tickAmount: 6,
      tickWidth: 1,
      tickLength: 5,
      lineWidth: 1,
    },
    legend: {
      enabled: false
    },
    credits: {
      enabled: false
    },
    plotOptions: {
      column: {
        animation: false
      },
      series: {
        borderWidth: 0,
        dataLabels: {
          enabled: false
        },
        point: {
          events: {
            mouseOver: function() {
              $(".highcharts-axis-labels span").eq(this.x).css('text-decoration', 'underline');
            },
            mouseOut: function() {
              $(".highcharts-axis-labels span").eq(this.x).css('text-decoration', 'none');
            }
          }
        },
        states: {
          hover: {
            brightness: -0.2 // darken
          }
        },
        turboThreshold: 0
      },
    },
    tooltip: {
      headerFormat: '',
      pointFormatter: function() {
        let v = this.y;
        let hasDecimal = (!isNaN(parseFloat(v)) && v.toString().indexOf('.') > -1);
        v = Highcharts.numberFormat(v, hasDecimal ? 2 : 0, '.', ',');
        let text = `${this.category} <br /> <strong>${this.series.name}: ${v}</strong>`;
        return text;
      },
      backgroundColor: '#666666',
      borderColor: '#CCCCCC',
      shadow: false,
      style: {
        color: '#FFFFFF'
      }
    },
    drilldown: {
      activeAxisLabelStyle: {
        textDecoration: 'none'
      }
    },
    series: series
  };
  // create the chart
  Highcharts.chart('container', theChart);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.src.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.src.js"></script>

<div id="container" style="height: 600px; min-width: 310px"></div>

请帮我解决这个问题。

谢谢。

0 个答案:

没有答案
相关问题
最新问题