highcharts 中的绘图选项自定义

tvz2xvvm 于 2023-04-21 发布在 Highcharts

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

我在Angular中有一个highchart图表容器，其中包含一个标记，一条线和一个面积图。我试图在没有工具提示选项的情况下显示图表中的标签。标签显示在图表上。但是我在下面的示例中有一些样式问题，我对标签的位置有点困惑。
Here是工作代码。
在上面，
1.显示标记值，但不显示名称。
1.当图表的值变小时，所有的标签都会重叠，很难阅读。我需要解决这个问题。
1.在面积图中，我只需要显示标签为左开始为“波段开始”和右结束为“波段结束”，目前它显示任何值在坐标.（我试图删除的名称，但它显示像'：值’）。
下面是我添加的用于绘制位置的代码片段。

Highcharts.SVGRenderer.prototype.symbols.connector = function(x, y, w, h, options) {
   var anchorX = options && options.anchorX,
     anchorY = options && options.anchorY,
     path,
     yOffset,
     lateral = w / 2,
     H = Highcharts;
   if (H.isNumber(anchorX) && H.isNumber(anchorY)) {
     path = ['M', anchorX, anchorY];
     // Prefer 45 deg connectors
     yOffset = y - anchorY;
     if (yOffset < 0) {
       yOffset = -h - yOffset;
     }
     if (yOffset < w) {
       lateral = anchorX < x + (w / 2) ? yOffset : w - yOffset;
     }
     // Anchor below label
     if (anchorY > y + h) {
       path.push('L', x + lateral, y + h);
       // Anchor above label
     } else if (anchorY < y) {
       path.push('L', x + lateral, y);
       // Anchor left of label
     } else if (anchorX < x) {
       path.push('L', x, y + h / 2);
       // Anchor right of label
     } else if (anchorX > x + w) {
       path.push('L', x + w, y + h / 2);
     }
   }
   return path || [];
 };

highcharts

来源：https://stackoverflow.com/questions/76048777/plot-options-customization-in-highchart-graphs

1条答案

按热度按时间

yeotifhr1#

1.您已经将data-labels格式设置为'{point.name}' + ': ' + '{x}'，但在上一个系列中没有定义标记点的名称。您可以按照以下方式添加：

series: [...,
     {
       data: [{
         x: Math.round(currentlyAchievableChartData.bar_graph_med),
         y: 0,
         name: 'Estimated Achievable Property Value - Med',
         ...
       }],
       ...
     }
   ]

1.数据标签有一个内置的防冲突逻辑，但是使用自定义形状时，您需要自己处理这个问题。最简单的方法是设置一些宽度：

plotOptions: {
     series: {
       dataLabels: {
         ...,
         style: {
           width: 60
         }
       }
     }
   }

1.只需为面积系列设置不同的数据标签格式：

plotOptions: {
     ...,
     area: {
       dataLabels: {
         format: '{point.name}'
       }
     }
   }

现场演示：https://jsfiddle.net/BlackLabel/bokyaqxf/

赞(0）回复(0）举报 2023-04-21

我来回答

highcharts 中的绘图选项自定义

1条答案

相关问题

热门标签

最新问答