高图-标题中的位置图标元素
[英]Highcharts - position icon element in the title
问题描述
I am having 11 charts with icon in the chart title, I was wondering how to apply some css to place those icons to the left, right above y axis with numbers, so that title text stays in the center, without having to make a class for each icon. 
我在图表标题中有11个带有图标的图表，我想知道如何应用CSS将这些图标放在带有数字的y轴的左，右上方，以便标题文本停留在中心，而无需创建类每个图标。 Here is the example. 这是例子。 This is the code: 这是代码：
$(function () {
//set of common options
Highcharts.setOptions({
chart: {
type: 'boxplot'
},
credits: {
enabled: false
},
title: {
useHTML: true,
},
legend: {
enabled: false
},
xAxis: {
categories: ['2011', '2012', '2013', '2014', '2015'],
title: {
text: 'Experiment No.'
}
},
yAxis: {
plotLines: [{
color: 'red',
width: 1,
label: {
align: 'center',
style: {
color: 'gray'
}
}
}]
},
series: [{
color: Highcharts.getOptions().colors[0],
type: 'scatter',
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: Highcharts.getOptions().colors[0]
}
}]
});
//plotline options
var plotLinesOption = {
width: 1,
color: 'red'
};
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'indikator1',
},
title: {
text: '<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Help text that goes next to the chart title"><i class="ion-help"></i></span> Arbeidsmarkedsintegrasjon'
},
yAxis: {
title: {
text: 'Verdi'
},
plotLines: [Highcharts.merge(plotLinesOption,{value: 932, label:{text: 'Theoretical mean: 932'}})]
},
series: [{
name: 'Observations',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: 'Outlier',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
],
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'indikator2',
},
title: {
text: '<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Help text that goes next to the chart title"><i class="ion-help"></i></span> Arbeidsledige'
},
yAxis: {
title: {
text: 'Verdi'
},
plotLines: [Highcharts.merge(plotLinesOption,{value: 932, label:{text: 'Theoretical mean: 932'}})]
},
series: [{
name: 'Observations',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: 'Outlier',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
],
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
var chart3 = new Highcharts.Chart({
chart: {
renderTo: 'indikator3',
},
title: {
text: '<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Help text that goes next to the chart title"><i class="ion-help"></i></span> Arbeidsledige Ungdom'
},
yAxis: {
title: {
text: 'Verdi'
},
plotLines: [Highcharts.merge(plotLinesOption,{value: 932, label:{text: 'Theoretical mean: 932'}})]
},
series: [{
name: 'Observations',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: 'Outlier',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
],
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
var chart4 = new Highcharts.Chart({
chart: {
renderTo: 'indikator4',
},
title: {
text: '<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Help text that goes next to the chart title"><i class="ion-help"></i></span> Ensidig næringsstruktur (Herfindal-index)'
},
yAxis: {
title: {
text: 'Verdi'
},
plotLines: [Highcharts.merge(plotLinesOption,{value: 932, label:{text: 'Theoretical mean: 932'}})]
},
series: [{
name: 'Observations',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: 'Outlier',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
],
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
var chart5 = new Highcharts.Chart({
chart: {
renderTo: 'indikator5',
},
title: {
text: '<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Help text that goes next to the chart title"><i class="ion-help"></i></span> Ensidig næringsstruktur i Privat sektor (Herfindal-index)'
},
yAxis: {
title: {
text: 'Verdi'
},
plotLines: [Highcharts.merge(plotLinesOption,{value: 932, label:{text: 'Theoretical mean: 932'}})]
},
series: [{
name: 'Observations',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: 'Outlier',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
],
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
var chart6 = new Highcharts.Chart({
chart: {
renderTo: 'indikator6',
},
title: {
text: '<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Help text that goes next to the chart title"><i class="ion-help"></i></span> Konkurranseutsatte næringer'
},
yAxis: {
title: {
text: 'Verdi'
},
plotLines: [Highcharts.merge(plotLinesOption,{value: 932, label:{text: 'Theoretical mean: 932'}})]
},
series: [{
name: 'Observations',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: 'Outlier',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
],
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
var chart7 = new Highcharts.Chart({
chart: {
renderTo: 'indikator7',
},
title: {
text: '<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Help text that goes next to the chart title"><i class="ion-help"></i></span> Naturbaserte næringer'
},
yAxis: {
title: {
text: 'Verdi'
},
plotLines: [Highcharts.merge(plotLinesOption,{value: 932, label:{text: 'Theoretical mean: 932'}})]
},
series: [{
name: 'Observations',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: 'Outlier',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
],
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
var chart8 = new Highcharts.Chart({
chart: {
renderTo: 'indikator8',
},
title: {
text: '<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Help text that goes next to the chart title"><i class="ion-help"></i></span> Offentlige arbeidsplasser'
},
yAxis: {
title: {
text: 'Verdi'
},
plotLines: [Highcharts.merge(plotLinesOption,{value: 932, label:{text: 'Theoretical mean: 932'}})]
},
series: [{
name: 'Observations',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: 'Outlier',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
],
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
var chart9 = new Highcharts.Chart({
chart: {
renderTo: 'indikator9',
},
title: {
text: '<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Help text that goes next to the chart title"><i class="ion-help"></i></span> Utdanningsnivå'
},
yAxis: {
title: {
text: 'Verdi'
},
plotLines: [Highcharts.merge(plotLinesOption,{value: 932, label:{text: 'Theoretical mean: 932'}})]
},
series: [{
name: 'Observations',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: 'Outlier',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
],
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
var chart10 = new Highcharts.Chart({
chart: {
renderTo: 'indikator10',
},
title: {
text: '<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Help text that goes next to the chart title"><i class="ion-help"></i></span> Forsørgelserbyrde'
},
yAxis: {
title: {
text: 'Verdi'
},
plotLines: [Highcharts.merge(plotLinesOption,{value: 932, label:{text: 'Theoretical mean: 932'}})]
},
series: [{
name: 'Observations',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: 'Outlier',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
],
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
var chart11 = new Highcharts.Chart({
chart: {
renderTo: 'indikator11',
},
title: {
text: '<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Help text that goes next to the chart title"><i class="ion-help"></i></span> Forsørgelsesbyrde Eldre'
},
yAxis: {
title: {
text: 'Verdi'
},
plotLines: [Highcharts.merge(plotLinesOption,{value: 932, label:{text: 'Theoretical mean: 932'}})]
},
series: [{
name: 'Observations',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: 'Outlier',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
],
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
});
});
1 个解决方案
解决方案1
2 已采纳 2016-05-19 18:44:22
jlbriggs definitely has the more practical solution in mind. jlbriggs绝对在考虑更实际的解决方案。 I tried the labels idea out to little success, but the renderer function works very well for this task. 我尝试了labels想法，但收效甚微，但是renderer功能可以很好地完成此任务。
You want to add the renderer code at the end of your chart options, as its own function (see also the updated fiddle at http://jsfiddle.net/brightmatrix/mu9wswv3/10/ ). 您希望在图表选项的末尾添加渲染器代码，作为其自己的功能（另请参见http://jsfiddle.net/brightmatrix/mu9wswv3/10/上的更新小提琴）。
// the rest of your chart options go here
...
}, function (chart) { // on complete
chart.renderer.html('<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" title="Help text that goes next to the chart title"><i class="ion-help"></i></span>', 50, 30) .css({ color: 'black', fontSize: '20px' }).add();
}
});
Here's how this will appear in your chart (the red arrow is just my annotation to help show the icon's position): 这是它在图表中的显示方式（红色箭头只是我的注释，以帮助显示图标的位置）：
Please let me know if this solves your question. 如果这能解决您的问题，请告诉我。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Highcharts - Position 标题下图 - Highcharts - Position title under chart
如何在highcharts中的饼图内动态地将图表标题位置居中 - How to center chart title position dynamically inside pie chart in highcharts
将图标移动到悬停或单击的元素的绝对位置 - move the icon to the absolute position of the element that was hovered or clicked
将选择元素放置到具有z-index位置的div到Highcharts容器中 - Putting select element to div with z-index position to Highcharts container
Highcharts 专栏如何将系列名称移动到标题 position 与更大的文字大小 - Highcharts column how to move series name to the title position with bigger text size
Highcharts-如何将工具提示悬停在每个饼图上的图标后面？ - Highcharts - How do I position tooltip behind icon on each pie slice on hover?
highcharts：获得yaxis头衔？ - highcharts: get yaxis title?
高图底部的字幕和标题 - Subtitle and title at bottom of highcharts
在模式中设置图表标题 - setting highcharts title in a modal
按标题查找图表（Highcharts） - Find chart by title (Highcharts)
相关标签