ハイチャート - 2番目のデータシリーズにデータラベルとツールチップを配備する方法

Question

少し珍しいハイチャートを作成しました。同じプロットエリアに2つのシリーズを配置していますが、「ラインアップ」の代わりに、プロットエリア全体を共有する代わりに、series0は領域の左側を使用し、series1は右側を使用しています。 2つの（関連する）ものを除いて、すべてがうまくいっています。ページの右側のシリーズ1データのツールチップやデータラベルを表示することはできません。ここでは完全に推測していますが、一緒に並んでいないため、シリーズが共有されていないと思います。

私は過去に様々なことを試してきましたが、完全にアイデアがなくなってしまいました。新鮮な目を望むと、うまくいくものが見つかるかもしれません。あなたの閲覧を快適のためのフィドルは、私が長い答えを書く時間がない...

https://jsfiddle.net/wk0uh72o/

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 

<div id="adaRate"></div> 

$(function() { 
    var options = { 
    chart: { 
     renderTo: 'adaRate', 
     type: 'bar', 
     width: 600, 
     height: 400 
    }, 
    title: { 
     text: 'Average Daily Attendance Rate', 
     align: 'center', 
     style: { 
     fontWeight: 'bold', 
     color: 'rgba(0,0,0,.9)' 
     } 
    }, 
    legend: { 
     enabled: true 
    }, 
    tooltip: { 
     shared: true, 
     crosshairs: true, 
     formatter: function() { 
     var s = '<b>' + this.x + '</b>'; 

     $.each(this.points, function() { 
      s += '<br/>' + this.series.name + ': ' + 
      this.y + '%'; 
     }); 

     return s; 
     }, 
    }, 
    xAxis: { 
     labels: { 
     style: { 
      fontWeight: 'bold' 
     } 
     } 
    }, 
    yAxis: [{ 
     min: 0, 
     max: 100, 
     opposite: true, 
     width: 270, 
     title: { 
     text: 'Average Daily Attendance %' 
     } 
    }, { 
     min: -10, 
     max: 10, 
     offset: 0, 
     opposite: true, 
     plotLines: [{ 
     color: 'red', 
     value: 0, 
     width: 2 
     }], 
     left: 400, 
     width: 170, 
     title: { 
     text: 'Variance from Prior Year' 
     } 
    }], 
    series: [{ 
     name: 'ADA', 
     dataLabels: { 
     enabled: true, 
     align: 'right', 
     color: '#FFFFFF', 
     x: -10 
     }, 
     yAxis: 0, 
    }, { 
     type: 'scatter', 
     name: 'PY Variance', 
     dataLabels: { 
     enabled: true, 
     align: 'center', 
     color: '#000000', 
     x: -10 
     }, 
     yAxis: 1, 
    }], 
    credits: { 
     enabled: false 
    } 
    }; 

    var categories = ["School 1", "School 2", "School 3", "School 4", "School 5", "School 6", "School 7"]; 
    var adaRate = [96.4, 95.9, 93.3, 92.3, 89.8, 85.4, 83.9]; 
    var adaVar = [{ 
    "color": "yellow", 
    "y": -.8 
    }, { 
    "color": "red", 
    "y": -3.5 
    }, { 
    "color": "lightgreen", 
    "y": 1.5 
    }, { 
    "color": "lightgreen", 
    "y": 2.3 
    }, { 
    "color": "red", 
    "y": -4.3 
    }, { 
    "color": "green", 
    "y": 5.3 
    }, { 
    "color": "darkgreen", 
    "y": 7.8 
    } 
    ]; 

    options.xAxis.categories = categories; 
    options.series[0].data = adaRate; 
    options.series[1].data = adaVar; 
    var chart = new Highcharts.Chart(options); 
}); 

Answer 1

トップレベルのツールチップを削除するだけで済みます。しかし、それを別々に各シリーズに設定してください。

series: [{ 
    name: 'ADA', 
    dataLabels: { 
    enabled: true, 
    align: 'right', 
    color: '#FFFFFF', 
    x: -10 
    }, 
    yAxis: 0, 
    tooltip: { 
    pointFormat: 'First {point.y}' 
    } 
}, { 
    type: 'scatter', 
    name: 'PY Variance', 
    dataLabels: { 
    enabled: true, 
    align: 'center', 
    color: '#000000', 
    x: -10 
    }, 
    yAxis: 1, 
    tooltip: { 
    pointFormat: 'Second {point.y}' 
    } 
}], 

fiddleを更新しました。あなたから更新されました。

Answer 2

を取り付けられています。しかし、共有されているツールチップは、順序付けされていないデータ（円、散布、フラグ）では機能しません。 http://api.highcharts.com/highcharts#tooltip.shared

lineWidthが0の線系列を使用して散布図をシミュレートすることができます。また、マウスオーバー時にlineWidthを増加させないようにmouseOverイベントを変更する必要があります。