HighChartsを使用してポイントまたは永続ラベル用のスティッキーツールチップを作成する

Question

特定のポイントの永続的なツールチップを作成しようとしています 永続的なことを言って何を意味しますか::それは常に表示されるいつも抱かれていた時だけ。 私はそこに表示されているラベルにも開いているが、私はそれが正確なポイントに関連している必要があり、グラフの幅は動的なので、チャートオブジェクトへの相対的なX-Y CSSの位置付けではない。

例： シリーズ：[{名： '怒り'、

データ：[{Y：9であり、X：として、Date.UTC（2011、10、5）、名称： 'EURにUSD' をマーカー：{記号：「URL（sun.png）」、ラベル「123」、スティッキー・ツールチップ：真}}]当然の

この文句を言わない仕事、しかし、私はあなたが私が達成しようとしています何を理解してほしいです。

ご協力いただきありがとうございます。これはHighCharts chart.renderer()機能を使用することも可能である

 var chart; 

     $(document).ready(function() { 

      chart = new Highcharts.Chart({ 

       chart: { 

        renderTo: 'container', 

        defaultSeriesType: 'spline', 

       }, 

       title: { 

        text: 'Emotions graph', 

        style: { 

         position: 'relative', 

        }, 

        x: 20, //center, 

        y: 8 , 

       }, 

       subtitle: { 

        text: ' ', 

        x: -20 

       }, 

       xAxis: { 

        type: 'datetime', 

        dateTimeLabelFormats: { day: '%e. %b' }, 

        tickInterval:24 * 3600 * 1000 * 7, 

        showLastLabel : true, 

        maxPadding:0, 

        minPadding:0 

       }, 

       yAxis: { 

        max :10, 

        title: { text: 'Emotion level' }, 

       }, 

       tooltip: { 

        enabled:true,      

        formatter: function() { 

         var month=new Array(12); 

         month[0]="January"; 

         month[1]="February"; 

         month[2]="March"; 

         month[3]="April"; 

         month[4]="May"; 

         month[5]="June"; 

         month[6]="July"; 

         month[7]="August"; 

         month[8]="September"; 

         month[9]="October"; 

         month[10]="November"; 

         month[11]="December"; 

         var temptime = new Date(this.x); 



         if (this.point.name != null) { thename = this.point.name + '<br/>'; } else { thename ='' };      

         return thename + '<b>'+ this.series.name +'</b><br/>Level of: '+ 

         this.y + '<br/>Date: ' + temptime.getDate() + ' of ' + month[temptime.getMonth() ] ; 

        } 

       }, 

       legend: { 

        style: { padding: 30 }, 

        align: 'center', 

        verticalAlign: 'top', 

        y: 15, 

        floating: true, 

        borderWidth: 0 

       }, 

       credits: { enabled: false }, 

       series: [{ 

        name: 'Excitment', 

        lineWidth: 2 , 

        data: [ 

         [Date.UTC(2011, 9, 27), 7], 

         [Date.UTC(2011, 9, 20), 6], 

         [Date.UTC(2011, 9, 21), 7], 

         [Date.UTC(2011, 10, 2), 8], 

         [Date.UTC(2011, 10, 9), 6], 

         [Date.UTC(2011, 10, 16), 6], 

         [Date.UTC(2011, 10, 14), 7], 

         [Date.UTC(2011, 10, 1), 1], 

         [Date.UTC(2011, 9, 24), 2], 

         [Date.UTC(2011, 10, 4), 9], 

         [Date.UTC(2011, 10, 11), 7], 

         [Date.UTC(2011, 10, 15), 7], 

         [Date.UTC(2011, 9, 25), 6], 

         [Date.UTC(2011, 10, 2), 7], 

         [Date.UTC(2011, 10, 6), 2], 

         [Date.UTC(2011, 10, 13), 8], 

         [Date.UTC(2011, 10, 3), 1], 

         [Date.UTC(2011, 9, 26), 1], 

         [Date.UTC(2011, 10, 9), 5], 

         [Date.UTC(2011, 10, 12), 6] 

        ] 

        },{ 

        name: 'Tranquility', 

        lineWidth: 2, 

        data: [ 

         [Date.UTC(2011, 10, 18), 2], 

         [Date.UTC(2011, 9, 26), 2], 

         [Date.UTC(2011, 10, 1), 4], 

         [Date.UTC(2011, 10, 11), 5], 

         [Date.UTC(2011, 9, 21), 5], 

         [Date.UTC(2011, 10, 12), 9], 

         [Date.UTC(2011, 9, 25), 5], 

         [Date.UTC(2011, 10, 4), 4], 

         [Date.UTC(2011, 10, 9), 1], 

         [Date.UTC(2011, 10, 13), 5], 

         [Date.UTC(2011, 10, 19), 6], 

         [Date.UTC(2011, 9, 25), 6], 

         [Date.UTC(2011, 9, 31), 3], 

         [Date.UTC(2011, 10, 7), 3] 

        ] 

        }, { 

        name: 'Happiness', 

        lineWidth: 2 , 

        data: [ 

         [Date.UTC(2011, 10, 9), 5], 

         [Date.UTC(2011, 9, 20), 5], 

         [Date.UTC(2011, 9, 28), 5], 

         [Date.UTC(2011, 10, 12), 6], 

         [Date.UTC(2011, 10, 1), 5], 

         [Date.UTC(2011, 9, 24), 5], 

         [Date.UTC(2011, 9, 29), 7], 

         [Date.UTC(2011, 10, 18), 4], 

         [Date.UTC(2011, 9, 24), 9], 

         [Date.UTC(2011, 9, 22), 3], 

         [Date.UTC(2011, 9, 21), 3] 

        ] 

        },{ 

        name: 'Anger', 

        lineWidth: 2, 

        data: [ 

         [Date.UTC(2011, 9, 28), 4], 

         [Date.UTC(2011, 9, 26), 2], 

         [Date.UTC(2011, 10, 1), 4], 

         [Date.UTC(2011, 10, 11), 5], 

         [Date.UTC(2011, 9, 25), 8], 

         [Date.UTC(2011, 9, 27), 3], 

         [Date.UTC(2011, 9, 30), 8], 

         [Date.UTC(2011, 9, 29), 3], 

         { y: 9, x: Date.UTC(2011, 10, 5), name: 'USD to EUR', marker: { symbol: 'url(sun.png)', label: '123' } }, 

         [Date.UTC(2011, 9, 27), 4], 

         [Date.UTC(2011, 10, 18), 5], 

         [Date.UTC(2011, 10, 13), 7], 

         [Date.UTC(2011, 10, 19), 6], 

         [Date.UTC(2011, 9, 25), 6], 

         [Date.UTC(2011, 10, 12), 3], 

         [Date.UTC(2011, 9, 26), 4] 

        ] 

        },{ 

        name: 'Average', 

        lineWidth: 2, 

        data: [ 

         { y: 9, x: Date.UTC(2011, 9, 31), marker: { symbol: 'url(snow.png)' } }, 

         [Date.UTC(2011, 9, 20), 4], 

         [Date.UTC(2011, 9, 22), 2], 

         [Date.UTC(2011, 10, 20), 4], 

         [Date.UTC(2011, 10, 16), 5], 

         [Date.UTC(2011, 9, 29), 8], 

         [Date.UTC(2011, 9, 28), 3], 

         [Date.UTC(2011, 9, 29), 9], 

         [Date.UTC(2011, 10, 08), 7], 

         [Date.UTC(2011, 10, 17), 6], 

         [Date.UTC(2011, 9, 23), 6], 

         [Date.UTC(2011, 10, 12), 3], 

         [Date.UTC(2011, 9, 27), 4] 

        ] 

        } 

       ] 



      }); 





     }); 

Answer 1

：それらのための

は完全なファイルを参照してくださいwholike。

はHighCharts APIリファレンスからこのJSFiddleこのJSFiddleを試してみてください。両方とも、レンダラーを使用してチャート上にテキストまたはテキストボックスを書いて、ポイントに固定する方法を示しています。