ホーム>source

以下のJSFiddleのように、時系列エリアチャートのツールチップ内に半円ドーナツチャートを配置しようとしています:

https://jsfiddle.net/bru187cj/74/

   tooltip: {
        shape:'circle',
        useHTML: true,
        formatter: function() {
            setTimeout( function() { 
                $("#tca").highcharts({
                    chart: {
                          height:200,
                        backgroundColor:null,
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                       },
                        title:{
                            text:''
                        },
                        credits:{
                            enabled:false
                        },
                        exporting: {
                            enabled: false
                        },   
                        plotOptions: {
                                pie: {
                                    dataLabels: {
                                        distance: 5
                                    }
                                }
                        },                        
                    series: [{
                        type:'pie',
        startAngle: -90,
        endAngle: 90,
        center: ['50%', '75%'],                            
                        innerSize:'60%',                            
                        data: [["A",15],["B",20],["C",3],["D",2]]
                    }]
                });
            }, 10)                      
            return "<div id='hc-tooltip'><div id='tca'></div></div>";
        }
    }

ただし、結果からわかるように、ドーナツグラフはツールチップ領域の外側に表示されています。この動作はStockChartに固有のように見えることに注意してください。

誰かがここで助けてくれることを願っています。

あなたの答え
  • 解決した方法 # 1

    設定できます高さ ツールチップのチャートコンテナのスタイルですが、メインのチャートプロットエリアの高さより高くすることはできません。

    #hc-tooltip {
        display: inline-block;
        width: 200px;
        height: 200px;
        padding: 0px;
    }
    
    

    最終的に、Tooltipプロトタイプの 'renderSplit'メソッドをカスタマイズできます。

    ライブデモ:https://jsfiddle.net/BlackLabel/q7vm0w1z/

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ websocket - netty、tomcatスレッドモデル