将呼出添加到Highcharts - Stacked Bar [英] Adding call outs to a Highcharts - Stacked Bar

问题描述

我想使用

解决方案是使用 series.dataLabels 并生成有标注：

  plotOptions：{
 series：{
 stacking：'normal'，
 dataLabels：{
 align：right，//右对齐标签
 enabled：true，
 useHTML：true，
 allowOverlap：true，
 overflow： none，
 crop：false，
y：-50，
x：145，
 formatter：function（）{
 return'< div class =callout topdata-name =Jane>我需要将此调用指向75！< / div>'; 
} 
} 
} 
}，
  

注意： x 和 y 可能会有所不同，因为这些取决于标注的宽度和高度。

I am trying to make an age timeline using a Stacked Bar from Hightcharts. I want to have multiple call outs that point to a data point in the timeline. I was going to use the tooltips but I need all the tooltips to always show and I need different content for each tooltip. So I though using a call out would be a better solution.

How can I make sure my call outs point to the data I need it to? How can I make it responsive since the bar chart itself, is responsive?

Does anyone have any idea on how I can achieve this?

解决方案

Live demo: http://jsfiddle.net/5joufkwa/9/

Solution is to use series.dataLabels and generate there callouts:

    plotOptions: {
        series: {
            stacking: 'normal',
            dataLabels: {
                align: "right", // right align for label
                enabled: true,
                useHTML: true,
                allowOverlap: true,
                overflow: "none",
                crop: false,
                y: -50,
                x: 145,
                formatter: function () {
                    return '<div class="callout top" data-name="Jane">I need to have this call out point to 75!</div>';
                }
            }
        }
    },

Note: x and y may vary, since those depends on width and height of the callout.

这篇关于将呼出添加到Highcharts - Stacked Bar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！