Highcharts饼图/圆环图突出显示和对齐标签

gc0ot86w 于 2022-11-10 发布在 Highcharts

关注(0)|答案(1)|浏览(346)

我有一个带有数据标签的饼图，它直接在点上，显示它的值和名称。但是我有一些问题我不能解决，即使在几个小时的尝试和谷歌搜索。

我想让一个标签突出，通过增加字体大小。我通过使用格式化程序和添加内联样式来管理它，但我不知道是否有更容易/更好的解决方案。
在某些情况下，标签可能会溢出，所以会被裁剪。这是好的，但如果文本有多个单词，我想在裁剪文本之前做一个休息。
所有在饼图左边的标签都应该是文本对齐right，右边的标签应该是文本对齐left。这样它们就总是向中心对齐。我甚至还没有找到一种方法来改变文本对齐。

我创建了一个小的JSFiddle：https://jsfiddle.net/x503prs6/54/
感谢阅读和所有你的帮助！

highcharts

来源：https://stackoverflow.com/questions/71957380/highcharts-pie-donut-chart-highlighting-and-aligning-labels

1条答案

按热度按时间

xmq68pz91#

在事件chart.events.load中，您还可以更新特定数据标签样式

events: {
      load: function() {
        let chart = this;
        chart.series[0].data[0].update({
          dataLabels: {
            useHTML: true,
            style: {
              fontSize: '20px',
              color: 'red',
            }
          }
        })
      }
    }

https://jsfiddle.net/BlackLabel/vnbxf64a/
其他选项是更改属性格式和添加分隔符，要自定义数据表中的文本截断，您可以选择在行中添加额外的CSS样式。

dataLabels: {
    useHTML: true,
    format: '<p class="truncate"><b>{point.name}</b></br>{point.y}</p>',
    style: {
      fontSize: '20px',
      color: 'red',
      textOverflow: 'ellipsis'
    }
  }

.truncate {
    width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 5px 0;
}

https://jsfiddle.net/BlackLabel/vnbxf64a/1/
尝试使用alignTo: 'plotEdges'，他们设置的标签接触到绘图区最近的垂直边缘，但我不确定你想如何确切地对齐标签。https://api.highcharts.com/highcharts/series.pie.dataLabels.alignTo

赞(0）回复(0）举报 2022-11-10

我来回答

Highcharts饼图/圆环图突出显示和对齐标签

1条答案

相关问题

热门标签

最新问答