ハイチャート - タイトル内の位置アイコン要素

Question

私はチャートタイトルにアイコン付きの11個のチャートを持っていますが、これらのアイコンをy軸上の数字の上に置くためにいくつかのCSSを適用する方法が不思議でした。それぞれのアイコンのクラスを作成することなく、中央にとどまります。 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}' 
     } 
    }] 
    }); 
}); 

Answer 1

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(); 
    } 
}); 

はここ（赤い矢印がアイコンの位置を示して助けるためにちょうど私の注釈である）、これはあなたのチャートに表示される方法は次のとおりです。

これはあなたの質問を解決するかどうか私に教えてください。