javascript - 修复了 Highcharts 系列数据标签中的数据标签尺寸

标签 javascript svg highcharts

我愿意实现以下目标:

我的 highcharts 图表有这个系列,每个点都附加了数据标签,如下例所示: http://jsfiddle.net/sbochan/p6Ufv/

数据标签应该是红色圆圈(完美的圆圈),因此我对它们使用了以下定义:

series{
//......////
dataLabels:{
        enabled : true,
        backgroundColor: 'rgb(229, 32, 32)',
        borderRadius:24,
        borderWidth:2,
        borderColor: '#890000',
        color:'#FFF',
        shadow:true,
        defer:false,
        padding: 3,
 }

当点数据是 2 位数字时,下面给出了一个带有一些笔划的漂亮红色圆圈。 问题出在 1 位或 2 位以上的数字上。 由于某种原因,highcharts 从数据标签内容中导出 Rect SVG 尺寸。这一事实导致数据标签在我的设计中变得不一致。 出于某种原因,我找不到一种方法来强制 highcharts 在系列数据标签的情况下使用 circle 而不是 rect,或者强制它根据符合我的尺寸规范。

这可能吗?有办法解决吗? 提前致谢。

最佳答案

我为我的问题找到了一个创造性的解决方案。 我创建了一个圆形图像(也可以使用 SVG),并将其用作该系列中的标记。这使得我的系列(也是一个散点系列)由许多圆圈组成。 然后,我使用了一些数据标签属性,例如 paddingstyle 来使它们看起来像我想要的那样。我最后一件事是使用格式化程序来设置正确的数据。

关于javascript - 修复了 Highcharts 系列数据标签中的数据标签尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26015485/

相关文章:

javascript - 使用任何浏览器跟踪 SVG 图像元素上的像素点击

css - img 标签中的 SVG 大小不一致,运动看起来像在跳舞

javascript - D3 : Using a closure to update a selection without re-binding data

javascript - 如何为同一图表中两种不同类型的系列添加两个不同的鼠标悬停?

javascript - 当在 hightchart 中使用 click 事件时,AngularJS $apply 有时不会触发更新 {{}} 内 html 标记中的 $scope 值。

javascript - 标题 javascript 地理位置

javascript - 将 jQuery 事件处理程序绑定(bind)到 `focus` 会使 select 在 IE 中表现得很奇怪

javascript - Highcharts 使用系列标签作为 x 轴类别

javascript - 自举三态开关

javascript - 日期选择器上的 selectValue 不起作用