如果标签不适合树图 Highcharts 的 div 它应该换行到第二行

Question

JS Fiddle link

Highcharts.chart('容器', {

series: [{
        useHTML:true,
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    data: [{
        name: 'A',
        value: 6,
        colorValue: 1
    }, {
        name: 'B',
        value: 6,
        colorValue: 2
    }, {
        name: 'C',
        value: 4,
        colorValue: 3
    }, 
    {
        name: 'Gnscweoihciohoihrioghoierhgoierhoiehgoirehgoirehoih',
        value: 1,
        colorValue: 7
    }]
}],
title: {
    text: 'Highcharts Treemap'
}

});

我尝试使用 HTML:true 属性，但没有帮助。 Word-Break 也没有得到应用

Answer 1

需要进行 2 次更新：

1.您必须在series 属性中添加dataLabels 属性

您在dataLabels! 之外添加了useHTML: ture 属性，因此请按如下方式使用：

dataLabels: {
    useHTML: true,
    // this is optional formatter, if you need more editing on text with html tags and css then you can use
    formatter() {
        return '<div>'+this.point.name+'</div>';
    }
},

2。为数据标签添加css

.highcharts-data-label span {
    white-space: normal !important;
}

检查代码内容中的工作示例：

Highcharts.chart('container', {
    series: [{
        dataLabels: {
            useHTML: true,
            // this is optional formatter, if you need more editing on text with html tags and css then you can use
            formatter() {
                return '<div>'+this.point.name+'</div>';
            }
        },
        type: 'treemap',
        layoutAlgorithm: 'squarified',
        data: [{
            name: 'A',
            label: "A",
            value: 6,
            colorValue: 1
        }, {
            name: 'B',
            value: 6,
            colorValue: 2
        }, {
            name: 'C',
            value: 4,
            colorValue: 3
        }, {
            name: 'D',
            value: 3,
            colorValue: 4
        }, {
            name: 'E',
            value: 2,
            colorValue: 5
        }, {
            name: 'F',
            value: 2,
            colorValue: 6
        }, {
            name: 'This is demo of my code, are you happy',
            value: 1,
            colorValue: 7
        }]
    }],
    title: {
        text: 'Highcharts Treemap'
    }
});

.highcharts-figure,
.highcharts-data-table table {
  min-width: 320px;
  max-width: 700px;
  margin: 1em auto;
}

. .highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #EBEBEB;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}

.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}

.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

.highcharts-data-label span {
    white-space: normal !important;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.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://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Tree maps are great tools for comparing values that are part
        of a whole, or for showing hierarchical data. This example
        is a simple tree map with no hierarchy, showing the value
        differences with rectangle sizes and using a color axis.
    </p>
</figure>

注意： 请不要使用您在示例中使用的“Gnscweoihciohoihrioghoierhgoierhoiehgoirehgoirehoih”那么大的词，使用有意义和真实的词，这样您会得到更好的解决方案和输出！