Highcharts：在图形上叠加标签 [英] Highcharts: overlay label on a graph

问题描述

我想在图表上叠加自定义图层（例如评论，作者）。阅读API似乎已经用于此目的的对象：

一个HTML标签，可以在图表区域的任何位置使用。

我尝试在其中一个示例图表上使用它，但它没有效果（见下文），尽管解释器不会发出任何错误。

谢谢。

<$>我做错了什么或者是否应该用其他方式创建这种类型的标签？ p $ p> chart = new Highcharts.Chart（{
图：{
renderTo：'pie-container'，
plotBackgroundColor：null，
plotBorderWidth ：null，
plotShadow：false
}，
标题：{
text：'在特定网站的浏览器市场份额，2010'
}，
tooltip：{
pointFormat：'{series.name}：< b> {point.percentage}％'，
percentageDecimals：1
}，
plotOptions：{
pie：{
allowPointSelect：true，
cursor：'pointer'，
dataLabels：{
enabled：true，
color：'#FFFFFF'，
connectorColor：'#FFFFFF'，
formatter：function（）{
return'< b>'+ this.point.name +'< / b> ;:'+ this.percentage +'％';
}
}
}
}，
系列：[{
类型：'pie'，
名称：'浏览器共享'，
数据：[
['Firefox'，45.0]，
['IE'，26.8]，
{
名称：'Chrome'，
y ：12.8，
切片：true，
选中：true
}，
['Safari'，8.5]，
['Opera'，6.2]，
['Others'，0.7]
]
}]，
标签：[
{html：< b>这是一个标签！< / b> ，
style：{
left：'100px'，
top：'100px'，
width：'50px'}}]，
}）;
}）;
}）;


解决方案

labels 应该是一个对象。

然后你必须添加每个标签作为元素 items 。

 标签：{
 items：[{
 html：< b>这是一个标签！< / b>，
 style：{
 left：'100px'，
 top：'100px'，
 width：'50px'
} 
}] 
 } 
  

演示

I'd like to overlay a custom layer over a chart (e.g. a comment, author). Reading the API there seems to be already an object for the purpose:

A HTML label that can be positioined anywhere in the chart area.

I tried using this on one of the example charts but it has no effect (see below), although the interpreter isn't issuing any error. Am I doing something wrong or should a lable of this kind be created some other way?

Thank you.

    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'pie-container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage}%',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#FFFFFF',
                    connectorColor: '#FFFFFF',
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }],
        labels: [
            {html: "<b>This is a label!</b>", 
            style: {
                left: '100px', 
                top: '100px',
                width: '50px'}}],
      });
   });
});

解决方案

labels should be an object.
Then you have to add each label as an element of items.

labels: {
    items: [{
        html: "<b>This is a label!</b>",
        style: {
            left: '100px',
            top: '100px',
            width: '50px'
        }
    }]
}

Demo

这篇关于Highcharts：在图形上叠加标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！