Question

请参阅此JSFiddle：http://jsfiddle.net/9r7vv1hm/1/ （最后的代码片段）

在这张图表中，我的紫罗兰拼接似乎没有标签。

但实际上它有，但是这个标签有css属性：top:-9999px（另外还有position: absolute）

我有两个问题：

我打算打印此图表，因此标签不是一个选项
我的页面高度超过10k px因此标签在网页的其他位置可见...

最初的高图将这些标签放在一个具有overflow:hidden属性（内联样式）的容器中，但是更糟糕的是标签溢出了一些而且单词被截断了，所以我强制溢出是可见的：

.report .highcharts-container {
  overflow: visible !important;
}

我的问题是，如何强制在图表周围显示所需的每个标签？

代码段：

$(function() {
	// inner pie
  var catData = [
    {"name":"Field A","y":41,"v":112164,"color":"#2f7ed8"},
    {"name":"Field B","y":26,"v":72476,"color":"#0d233a"},
    {"name":"Field C","y":4,"v":11281,"color":"#8bbc21"},
    {"name":"Field D","y":0,"v":741,"color":"#910000"},
    {"name":"Field E","y":17,"v":48414,"color":"#1aadce"},
    {"name":"Field F","y":3,"v":7875,"color":"#492970"},
    {"name":"Field G","y":8,"v":21271,"color":"#f28f43"}
	];
  // outer pie
  var typeData = [
    {"name":"Field 1","y":4,"v":11726,"color":"rgba(98,177,255,1)"},
    {"name":"Field 2","y":37,"v":100438,"color":"rgba(72,151,241,1)"},
    {"name":"Field 3","y":18,"v":49894,"color":"rgba(64,86,109,1)"},
    {"name":"Field 4","y":8,"v":22582,"color":"rgba(38,60,83,1)"},
    {"name":"Field 5","y":4,"v":11281,"color":"rgba(190,239,84,1)"},
    {"name":"Field 6","y":0,"v":0,"color":"rgba(164,213,58,1)"},
    {"name":"Field 7","y":0,"v":0,"color":"rgba(196,51,51,1)"},
    {"name":"Field 8","y":0,"v":741,"color":"rgba(170,25,25,1)"},
    {"name":"Field 9","y":4,"v":11645,"color":"rgba(77,224,255,1)"},
    {"name":"Field 10","y":13,"v":36769,"color":"rgba(51,198,231,1)"},
    {"name":"Field 11","y":0,"v":0,"color":"rgba(124,92,163,1)"},
    {"name":"Field 12","y":3,"v":7875,"color":"rgba(98,66,137,1)"},
    {"name":"Field 13","y":3,"v":8488,"color":"rgba(255,194,118,1)"},
    {"name":"Field 14","y":5,"v":12783,"color":"rgba(255,168,92,1)"}
	];
  var series = [];
  series.push({
    name: 'Category Split',
    data: catData,
    size: '60%',
    dataLabels: {
      enabled: false
    }
  });
  series.push({
    name: 'Type Split',
    data: typeData,
    size: '80%',
    innerSize: '60%',
    dataLabels: {
      enabled: true,
      color: '#808080',
      connectorColor: this.color,
      formatter: function() {
        return this.y > 0 ? '<center><b>' + this.point.name + ':</b><br> ' + this.point.v + '€ (' + Math.round(this.y) + ' %)</center>' : null;
      },
      style: {
        fontWeight: 'normal'
      },
      useHTML: true,
      distance: 50
    }
  });


  $('#Chartreport1_5').highcharts({
    chart: {
      type: 'pie',
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false
    },
    title: {
      text: ''
    },
    tooltip: {
      enabled: false
    },
    plotOptions: {
      pie: {
        borderWidth: 0,
        cursor: 'pointer',
        shadow: false
      }
    },
    series: series,
    navigation: {
      buttonOptions: {
        enabled: false
      }
    },
    credits: {
      enabled: false
    }
  });
});

/* Some labels may overflow a bit */
.report .highcharts-container {
  overflow: visible !important;
}

.report {
  height: 137.45mm;
  width: 210mm;
  padding: 1px;
  box-sizing: border-box;
  margin: 0 auto;
  border: 1px solid hsl(0,50%,65%);
}

body .graphique {
  width: 100%;
  height: 70%;
  padding: 20px 20px;
  box-sizing: border-box;
  border: 1px solid hsl(230,50%,65%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>


<div class="report"> <!-- RED BORDER -->
  <div id="Chartreport1_5" class="graphique"></div> <!-- BLUE BORDER -->
  <p>
    some legend here
  </p>
</div>

防止隐藏Highcharts标签

代码段：

0 个答案: