Question

使用样式模式时，饼图部分标签不再具有文本轮廓。这与非风格模式不同，后者确实拥有它。控制它的特定css类称为＆＃34; highcharts-text-outline＆＃34;。样式模式中不显示任何文本元素（因此，没有样式的轮廓）。

两个例子：

非样式模式（注意文本标签上的白色轮廓）： https://codepen.io/rpoconn/pen/QrGaxw

    Highcharts.chart('container', {

  title: {
    text: 'Highcharts pie chart'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{
    type: 'pie',
    allowPointSelect: true,
    keys: ['name', 'y', 'selected', 'sliced'],
    size: "100%",
    innerRadius: "60%",
    data: [
      ['Apples', 29.9, false],
      ['Pears', 71.5, false],
      ['Oranges', 106.4, false],
      ['Plums', 129.2, false],
      ['Bananas', 144.0, false],
      ['Peaches', 176.0, false],
      ['Prunes', 135.6, false],
      ['Avocados', 148.5, false]
    ],
    showInLegend: true
  }, {
    type: 'pie',
    innerRadius: "0%",
    size: "60%",
    allowPointSelect: true,
    keys: ['name', 'y', 'selected', 'sliced'],
    data: [
      ['Apples2', 2*29.9, false],
      ['Pears2', 2*71.5, false],
      ['Oranges2', 2*106.4, false],
      ['Plums2', 2*129.2, false],
      ['Bananas2', 144.0, false],
      ['Peaches2', 176.0, false],
      ['Prunes2', 3*135.6, false],
      ['Avocados2', 4*148.5, false]
    ],
    showInLegend: true
  }]
});

样式模式（与上面相同的代码，但是，使用/ js / highcharts + highcharts.scss lib）： https://codepen.io/rpoconn/pen/mLOpLQ

有没有人知道解决这个问题的方法？这是一个错误吗？我可以在这之后使用highcharts-data-label-box ::并入侵一个吗？有更干净的方式吗？我使用的是HC 6.1和标准的highcharts.scss样式。

Answer 1

对于codepen 1：

添加以下内容：

tspan {
  stroke: none;
}

或大纲

tspan {
  stroke: white;
}

Codepen 2需要使用文本阴影：

.highcharts-data-label text {
    fill: #333333;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

那应该做的。

Highcharts饼标签使用样式模式勾勒出mising

1 个答案: