Highcharts - 标题中的位置图标元素
我在图表标题中有11个带图标的图表，我想知道如何应用一些css将这些图标放在左边，y轴上方的数字，以便标题文本保持在中心，而不必为每个图标创建一个类。 Here就是一个例子。这是代码：
$(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 个答案:
答案 0 :(得分：2)
jlbriggs 绝对有更实用的解决方案。我尝试了labels想法并没有取得什么成功，但renderer函数可以很好地完成这项任务。
您希望在图表选项的末尾添加渲染器代码，作为其自己的功能（另请参阅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();
}
});
以下是图表中的显示方式（红色箭头只是我的注释，有助于显示图标的位置）：
如果这可以解决您的问题，请告诉我。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？