javascript - Highcharts 在饼图标签上随机产生奇怪的笔画

标签 javascript jquery css highcharts

我正在修改图表标签上的字体,但似乎有一个笔划应用于某些标签而不是其他标签。

我已将图表分解为一个非常小的版本,笔划仍然存在。是什么导致出现笔画,如何为所有标签关闭笔画?

$(function () {

Highcharts.theme = {
    colors:  [
  '#94B8D2',
  '#2a71a5',
  '#A699B9',
  '#4D3474',
  '#CDAED1',
  '#82368C',
  '#AAAEB2',
  '#565E65',
  '#EF92A5',
  '#DF264C',
  '#FFBA9D',
  '#FF763B',
  '#95FEDB',
  '#27CAE1',
  '#EAEAA1',
  '#D5D644',
  ]
};

// Apply the theme
Highcharts.setOptions(Highcharts.theme);

    var donutData = [
      ['K01',6243],
      ['K05',1788],
      ['K07',8745],
      ['K08',16018],
      ['K12',11647],
      ['K18',0],
      ['K22',4482],
      ['K23',5166],
      ['K24',2922],
      ['K25',2103],
      ['K99',8410],  
    ];

    Highcharts.chart('StrokeProblem', {
        title: {
            text: "Bizarre Label Strokes",
            align: 'center',
            verticalAlign: 'middle',           
        },
        series: [{
            type: 'pie',
            name: 'Stroke',
            innerSize: '75%',
            data: donutData,
        }],
        plotOptions: {
            pie: {
                dataLabels: {
                        style: { fontSize: '17px' },
                    formatter: function(label){
                      label.color = this.color;
                            return this.point.name;
                    },
                }
            }
        },
    });
});

这里是相关的JSFiddle .

最佳答案

Highcharts 会自动为字体颜色较浅的标签添加文本阴影。您可以使用 textOutline 属性禁用它:

dataLabels: {
 style: {
  fontSize: '17px',
  textOutline: false
 },
}

关于javascript - Highcharts 在饼图标签上随机产生奇怪的笔画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41751794/

相关文章:

javascript - 如何将这些电子邮件正则表达式更改为不区分大小写?

jquery - 如果在浏览器中输入了某个单词,如何使用 JQuery 检查?

jQuery 选项卡选择特定选项卡

css - 如何 DRY 媒体查询

javascript - 从数组中的对象连接数组

javascript - 如何获取 HTML 元素的值

php - 双击word后,如何使用php或jquery将word插入数据库

javascript - 如果盒子是特定颜色,我该如何更改它的颜色?

css3 div 和 anchor 标签倾斜变换在不同的边

javascript - 从 wordpress 表单创建自定义 XML 文件