时间戳

首页 > 解决方案 > Highcharts - 当系列字体增加时，桑基图不显示所有数据

javascript - Highcharts - 当系列字体增加时，桑基图不显示所有数据

问题描述

我有一个简单的 highcharts sankey 图表。我正在使用示例数据绘制它。每件事都运行良好，但这里有一个小问题，当我增加数据标签的字体大小时，它没有显示所有数据。当我只悬停它的显示。有什么解决办法吗。这是下面的代码。我还在导出选项中控制字体大小。

html

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.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>
<div id="container"></div>

脚本

Highcharts.chart('container', {

    title: {
        text: 'Highcharts Sankey Diagram'
    },
    accessibility: {
        point: {
            valueDescriptionFormat: '{index}. {point.from} to {point.to}, {point.weight}.'
        }
    },

        exporting: {
  chartOptions: {
       series: [{
         dataLabels: {
           style: {
             fontSize: "6px",
             fontWeight: "normal"
           }
         }
       }]
       }
      },
    series: [{
        keys: ['from', 'to', 'weight'],
        data: [
            ['Brazil', 'Portugal', 5],
            ['Brazil', 'France', 1],
            ['Brazil', 'Spain', 1],
            ['Brazil', 'England', 1],
            ['Canada', 'Portugal', 1],
            ['Canada', 'France', 5],
            ['Canada', 'England', 1],
            ['Mexico', 'Portugal', 1],
            ['Mexico', 'France', 1],
            ['Mexico', 'Spain', 5],
            ['Mexico', 'England', 1],
            ['USA', 'Portugal', 1],
            ['USA', 'France', 1],
            ['USA', 'Spain', 1],
            ['USA', 'England', 5],
            ['Portugal', 'Angola', 2],
            ['Portugal', 'Senegal', 1],
            ['Portugal', 'Morocco', 1],
            ['Portugal', 'South Africa', 3],
            ['France', 'Angola', 1],
            ['France', 'Senegal', 3],
            ['France', 'Mali', 3],
            ['France', 'Morocco', 3],
            ['France', 'South Africa', 1],
            ['Spain', 'Senegal', 1],
            ['Spain', 'Morocco', 3],
            ['Spain', 'South Africa', 1],
            ['England', 'Angola', 1],
            ['England', 'Senegal', 1],
            ['England', 'Morocco', 2],
            ['England', 'South Africa', 7],
            ['South Africa', 'China', 5],
            ['South Africa', 'India', 1],
            ['South Africa', 'Japan', 3],
            ['Angola', 'China', 5],
            ['Angola', 'India', 1],
            ['Angola', 'Japan', 3],
            ['Senegal', 'China', 5],
            ['Senegal', 'India', 1],
            ['Senegal', 'Japan', 3],
            ['Mali', 'China', 5],
            ['Mali', 'India', 1],
            ['Mali', 'Japan', 3],
            ['Morocco', 'China', 5],
            ['Morocco', 'India', 1],
            ['Morocco', 'Japan', 3]
        ],
         dataLabels: {
           style: {
             fontSize: "30px",
             fontWeight: "normal"
           }
         },
        type: 'sankey',
        name: 'Sankey demo series'
    }]

});

标签： javascripthtmlhighcharts

解决方案

一些数据标签是隐藏的，因为它们彼此太靠近并且重叠。要显示所有这些设置：

dataLabels: {
  allowOverlap: true,
  ...
}

现场演示：http: //jsfiddle.net/BlackLabel/6m4e8x0y/4967/

API 参考： https ://api.highcharts.com/highcharts/series.sankey.dataLabels.allowOverlap

推荐阅读