宽度X轴标签与分组关键词Highcharts

Question

我在寻找一个解决方案，以提高我的分组类别的2级x轴的标签宽度。标签重叠，现在周围的箱子。我怎样才能解决这个问题呢？

$(document).ready(function() {
  var chart = {
    type: 'bar',
    SpacingBottom: 50,
    marginBottom: 60
  };
  var plotOptions = {
    series: {
      animation: {
        duration: 2000
      },
      stacking: 'normal',
      borderWidth: 2
    }
  };
  var title = {
    text: 'Das verarbeitende Gewerbe liegt im Mittelfeld der Lohnlandschaft',
    style: {
      fontSize: '18px'
    },
    align: 'left'
  };
  var subtitle = {
    text: 'Monatlicher Bruttolohn in der Privatwirtschaft nach Wirtschaftsabschnitten, Kanton Thurgau, 2016, in CHF',
    style: {
      fontSize: '12px'
    },
    align: 'left'
  };

  var yAxis = {
    gridLineWidth: 0,
    title: {
      text: ''
    },
    lineWidth: 1,
    max: 15000,
    tickInterval: 3000,
  };
  var xAxis = {
    categories: [{
      name: '<b>Total</b>',
      categories: ['']
    }, {
      name: '<b>Sektor 2</b>',
      categories: ['Energie- und Wasserversorgung', 'Verarbeitendes Gewerbe', 'Baugewerbe']
    }, {
      name: '<b>Sektor 3</b>',
      categories: ['Erziehung und Unterricht', 'Information und Kommunikation ', 'Freiberufl., wiss. und tech DL¹', 'Grundstücks- u. Wohnungswesen', 'Finanz- und Versicherungs-DL¹', 'Gesundheits- und Sozialwesen', 'Erbringung v. sonst. DL¹', 'Verkehr und Lagerei', 'Handel- und Reperaturgewerbe', 'Kunst, Unterhaltung u. Erholung', 'Sonst. wirtschaftliche DL¹', 'Gastgewerbe/Beherbergung']
    }],
    title: {
      text: ''
    },
    labels: {
      groupedOptions: [{
        style: {
          color: 'black'
        },
        x: 20,
        rotation: 0,
        align: 'right'
      }],
      reserveSpace: true
    },
    gridLineWidth: 1,
    tickColor: '#ccd6eb',
    gridLineColor: '#ccd6eb'
  };
  var series = [{
    name: '9. Dezil',
    data: [1960, 1131, 1898, 1208, 1216, 3243, 2560, 4262, 3472, 1478, 2408, 1897, 2107, 667, 1106, 1138],
    color: '#00B4E8'
  }, {
    name: '3. Quantil',
    data: [1278, 1710, 1230, 994, 1625, 2931, 2111, 1734, 2114, 1084, 2028, 1774, 1509, 837, 1260, 670],
    color: '#0064e6'
  }, {
    name: 'Medianlohn',
    data: [1072, 1103, 960, 788, 1641, 1545, 1448, 1408, 1270, 1168, 2036, 880, 872, 800, 937, 586],
    color: '#0064e6'
  }, {
    name: '1. Quantil',
    data: [803, 488, 860, 591, 1230, 1275, 1038, 871, 704, 644, 715, 559, 568, 1318, 630, 415],
    color: '#00B4E8'
  }, {
    name: '1. Dezil',
    data: [4044, 5161, 4240, 4650, 4272, 4208, 4505, 4710, 4715, 4356, 3378, 4194, 4021, 2599, 3105, 3526],
    color: 'transparent'
  }];

  var tooltip = {
    shared: true,
    formatter: function() {
      if (this.x == 'Erziehung und Unterricht, <b>Sektor 3</b>' || this.x == 'Finanz- und Versicherungs-DL¹, <b>Sektor 3</b>' || this.x == 'Erbringung v. sonst. DL¹, <b>Sektor 3</b>' || this.x == 'Verkehr und Lagerei, <b>Sektor 3</b>' || this.x == 'Kunst, Unterhaltung u. Erholung, <b>Sektor 3</b>') {
        return this.x + '<br>9.Dezil: ' + addThousandsep(this.points[1].y + this.points[2].y + this.points[3].y + this.points[4].y + this.points[0].y + ' </span> CHF<br/>') + '<br>3.Quartil: ' + addThousandsep(this.points[1].y + this.points[2].y + this.points[3].y + this.points[4].y + ' </span> CHF<br/>') + '<br>Medianlohn: ' + addThousandsep(this.points[2].y + this.points[3].y + this.points[4].y + ' </span> CHF<br/>') + '<br>1. Quartil: ' + addThousandsep(this.points[3].y + this.points[4].y + ' </span> CHF<br/>') + '<br>1. Dezil: ' + addThousandsep(this.points[4].y + ' </span> CHF<br/>') + '<br><b>Hinweis</b>: Statistisch unsicher (Variationskoeffizient grösser als 5 %)';
      } else {
        return this.x + '<br>9.Dezil: ' + addThousandsep(this.points[1].y + this.points[2].y + this.points[3].y + this.points[4].y + this.points[0].y + ' </span> CHF<br/>') + '<br>3.Quartil: ' + addThousandsep(this.points[1].y + this.points[2].y + this.points[3].y + this.points[4].y + ' </span> CHF<br/>') + '<br>Medianlohn: ' + addThousandsep(this.points[2].y + this.points[3].y + this.points[4].y + ' </span> CHF<br/>') + '<br>1. Quartil: ' + addThousandsep(this.points[3].y + this.points[4].y + ' </span> CHF<br/>') + '<br>1. Dezil: ' + addThousandsep(this.points[4].y + ' </span> CHF<br/>');
      }
    }
  };

  var legend = {
    enabled: false
  };

  var credits = {
    text: '<b>¹ </b>DL = Dienstleistungen<br>Dienststelle für Statistik Kanton Thurgau <br>Datenquelle: Bundesamt für Statistik, Lohnstrukturerhebung 2016',
    href: false,
    style: {
      color: '#999999',
      cursor: false,
      fontSize: '10px'
    },
    position: {
      align: 'left',
      x: 10,
      y: -30
    }
  };
  var exporting = {
    allowHTML: true,
    enabled: true,
    filename: '2019_2_Bruttolohn_Wirtschaftsabschnitte_2016',
    buttons: {
      contextButton: {
        menuItems: "printChart separator downloadPNG downloadJPEG downloadSVG".split(" ")
      }
    }
  };

  var highchartsOptions = Highcharts.setOptions({
    lang: {
      decimalPoint: '.',
      thousandsSep: "'",
      months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
      weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
      shortMonths: ['Jan', 'Feb', 'Mrz', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],

      contextButtonTitle: 'Drucken, Download, Export',
      downloadJPEG: 'Download JPEG Bild',
      downloadPNG: 'Download PNG Bild',
      downloadSVG: 'Download SVG Vektor Bild',
      downloadXLS: 'Download XLS',
      printChart: 'Bild drucken',
      viewData: 'Datentabelle ein-/ausblenden',
      resetZoom: "Zoom zurücksetzen",
      resetZoomTitle: "Zoom zurücksetzen",
      drillUpText: "Zurück",
      numericSymbols: null
    }
  });


  var json = {};
  json.chart = chart;
  json.plotOptions = plotOptions;
  json.title = title;
  json.subtitle = subtitle;
  json.yAxis = yAxis;
  json.xAxis = xAxis;
  json.series = series;
  json.tooltip = tooltip;
  json.legend = legend;
  json.credits = credits;
  json.exporting = exporting;
  json.tooltip = tooltip;
  json.highchartsOptions = highchartsOptions;


  $('#2019_2_Bruttolohn_Wirtschaftsabschnitte_2016').highcharts(json);
});

function addThousandsep(nStr) {
  nStr += '';
  x = nStr.split('.');
  x1 = x[0];
  x2 = x.length > 1 ? '.' + x[1] : '';
  var rgx = /(\d+)(\d{3})/;
  while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + "'" + '$2');
  }
  return x1 + x2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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/export-data.js"></script>
<script src="https://highcharts.github.io/export-csv/export-csv.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>

<div id="2019_2_Bruttolohn_Wirtschaftsabschnitte_2016" style="max-width: 800px; height: 900px"></div>

谢谢你的帮助！丹妮拉

Answer 1

您可以通过添加适当的填充到xAxis.labels实现它。在你的情况xAxis.labels.padding = 30将正常工作。检查下面的演示发布。

$(document).ready(function() {
  var chart = {
    type: 'bar',
    SpacingBottom: 50,
    marginBottom: 60
  };
  var plotOptions = {
    series: {
      animation: {
        duration: 2000
      },
      stacking: 'normal',
      borderWidth: 2
    }
  };
  var title = {
    text: 'Das verarbeitende Gewerbe liegt im Mittelfeld der Lohnlandschaft',
    style: {
      fontSize: '18px'
    },
    align: 'left'
  };
  var subtitle = {
    text: 'Monatlicher Bruttolohn in der Privatwirtschaft nach Wirtschaftsabschnitten, Kanton Thurgau, 2016, in CHF',
    style: {
      fontSize: '12px'
    },
    align: 'left'
  };

  var yAxis = {
    gridLineWidth: 0,
    title: {
      text: ''
    },
    lineWidth: 1,
    max: 15000,
    tickInterval: 3000,
  };
  var xAxis = {
    categories: [{
      name: '<b>Total</b>',
      categories: ['']
    }, {
      name: '<b>Sektor 2</b>',
      categories: ['Energie- und Wasserversorgung', 'Verarbeitendes Gewerbe', 'Baugewerbe']
    }, {
      name: '<b>Sektor 3</b>',
      categories: ['Erziehung und Unterricht', 'Information und Kommunikation ', 'Freiberufl., wiss. und tech DL¹', 'Grundstücks- u. Wohnungswesen', 'Finanz- und Versicherungs-DL¹', 'Gesundheits- und Sozialwesen', 'Erbringung v. sonst. DL¹', 'Verkehr und Lagerei', 'Handel- und Reperaturgewerbe', 'Kunst, Unterhaltung u. Erholung', 'Sonst. wirtschaftliche DL¹', 'Gastgewerbe/Beherbergung']
    }],
    title: {
      text: ''
    },
    labels: {
      groupedOptions: [{
        style: {
          color: 'black'
        },
        x: 20,
        rotation: 0,
        align: 'right'
      }],
      padding: 30,
      reserveSpace: true
    },
    gridLineWidth: 1,
    tickColor: '#ccd6eb',
    gridLineColor: '#ccd6eb'
  };
  var series = [{
    name: '9. Dezil',
    data: [1960, 1131, 1898, 1208, 1216, 3243, 2560, 4262, 3472, 1478, 2408, 1897, 2107, 667, 1106, 1138],
    color: '#00B4E8'
  }, {
    name: '3. Quantil',
    data: [1278, 1710, 1230, 994, 1625, 2931, 2111, 1734, 2114, 1084, 2028, 1774, 1509, 837, 1260, 670],
    color: '#0064e6'
  }, {
    name: 'Medianlohn',
    data: [1072, 1103, 960, 788, 1641, 1545, 1448, 1408, 1270, 1168, 2036, 880, 872, 800, 937, 586],
    color: '#0064e6'
  }, {
    name: '1. Quantil',
    data: [803, 488, 860, 591, 1230, 1275, 1038, 871, 704, 644, 715, 559, 568, 1318, 630, 415],
    color: '#00B4E8'
  }, {
    name: '1. Dezil',
    data: [4044, 5161, 4240, 4650, 4272, 4208, 4505, 4710, 4715, 4356, 3378, 4194, 4021, 2599, 3105, 3526],
    color: 'transparent'
  }];

  var tooltip = {
    shared: true,
    formatter: function() {
      if (this.x == 'Erziehung und Unterricht, <b>Sektor 3</b>' || this.x == 'Finanz- und Versicherungs-DL¹, <b>Sektor 3</b>' || this.x == 'Erbringung v. sonst. DL¹, <b>Sektor 3</b>' || this.x == 'Verkehr und Lagerei, <b>Sektor 3</b>' || this.x == 'Kunst, Unterhaltung u. Erholung, <b>Sektor 3</b>') {
        return this.x + '<br>9.Dezil: ' + addThousandsep(this.points[1].y + this.points[2].y + this.points[3].y + this.points[4].y + this.points[0].y + ' </span> CHF<br/>') + '<br>3.Quartil: ' + addThousandsep(this.points[1].y + this.points[2].y + this.points[3].y + this.points[4].y + ' </span> CHF<br/>') + '<br>Medianlohn: ' + addThousandsep(this.points[2].y + this.points[3].y + this.points[4].y + ' </span> CHF<br/>') + '<br>1. Quartil: ' + addThousandsep(this.points[3].y + this.points[4].y + ' </span> CHF<br/>') + '<br>1. Dezil: ' + addThousandsep(this.points[4].y + ' </span> CHF<br/>') + '<br><b>Hinweis</b>: Statistisch unsicher (Variationskoeffizient grösser als 5 %)';
      } else {
        return this.x + '<br>9.Dezil: ' + addThousandsep(this.points[1].y + this.points[2].y + this.points[3].y + this.points[4].y + this.points[0].y + ' </span> CHF<br/>') + '<br>3.Quartil: ' + addThousandsep(this.points[1].y + this.points[2].y + this.points[3].y + this.points[4].y + ' </span> CHF<br/>') + '<br>Medianlohn: ' + addThousandsep(this.points[2].y + this.points[3].y + this.points[4].y + ' </span> CHF<br/>') + '<br>1. Quartil: ' + addThousandsep(this.points[3].y + this.points[4].y + ' </span> CHF<br/>') + '<br>1. Dezil: ' + addThousandsep(this.points[4].y + ' </span> CHF<br/>');
      }
    }
  };

  var legend = {
    enabled: false
  };

  var credits = {
    text: '<b>¹ </b>DL = Dienstleistungen<br>Dienststelle für Statistik Kanton Thurgau <br>Datenquelle: Bundesamt für Statistik, Lohnstrukturerhebung 2016',
    href: false,
    style: {
      color: '#999999',
      cursor: false,
      fontSize: '10px'
    },
    position: {
      align: 'left',
      x: 10,
      y: -30
    }
  };
  var exporting = {
    allowHTML: true,
    enabled: true,
    filename: '2019_2_Bruttolohn_Wirtschaftsabschnitte_2016',
    buttons: {
      contextButton: {
        menuItems: "printChart separator downloadPNG downloadJPEG downloadSVG".split(" ")
      }
    }
  };

  var highchartsOptions = Highcharts.setOptions({
    lang: {
      decimalPoint: '.',
      thousandsSep: "'",
      months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
      weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
      shortMonths: ['Jan', 'Feb', 'Mrz', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],

      contextButtonTitle: 'Drucken, Download, Export',
      downloadJPEG: 'Download JPEG Bild',
      downloadPNG: 'Download PNG Bild',
      downloadSVG: 'Download SVG Vektor Bild',
      downloadXLS: 'Download XLS',
      printChart: 'Bild drucken',
      viewData: 'Datentabelle ein-/ausblenden',
      resetZoom: "Zoom zurücksetzen",
      resetZoomTitle: "Zoom zurücksetzen",
      drillUpText: "Zurück",
      numericSymbols: null
    }
  });


  var json = {};
  json.chart = chart;
  json.plotOptions = plotOptions;
  json.title = title;
  json.subtitle = subtitle;
  json.yAxis = yAxis;
  json.xAxis = xAxis;
  json.series = series;
  json.tooltip = tooltip;
  json.legend = legend;
  json.credits = credits;
  json.exporting = exporting;
  json.tooltip = tooltip;
  json.highchartsOptions = highchartsOptions;


  $('#2019_2_Bruttolohn_Wirtschaftsabschnitte_2016').highcharts(json);
});

function addThousandsep(nStr) {
  nStr += '';
  x = nStr.split('.');
  x1 = x[0];
  x2 = x.length > 1 ? '.' + x[1] : '';
  var rgx = /(\d+)(\d{3})/;
  while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + "'" + '$2');
  }
  return x1 + x2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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/export-data.js"></script>
<script src="https://highcharts.github.io/export-csv/export-csv.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>

<div id="2019_2_Bruttolohn_Wirtschaftsabschnitte_2016" style="max-width: 800px; height: 900px"></div>

演示：

• http://jsfiddle.net/BlackLabel/nj0mgpba/

API参考：

• https://api.highcharts.com/highcharts/xAxis.labels.padding