

例えば、前年と今年の様にx軸の同一目盛り上に複数グラフを表示した際、１つのツールチップに複数のグラフの値を表示する方法を教えて下さい。グラフにカーソルをあてると１つの値が表示されるケースと複数の値が表示されるケースがあり不定です。

現在のツールチップ設定内容

[code]

           tooltip: {
               crosshairs: true
              ,shared: true
              ,pointFormat: '<span style="color:{series.color}">{series.name}:</span> {point.y}<br>'
           }
    
[/code]


CC BY-SA 3.0
2016-04-12T06:44:52.643
23943
2016-10-02T08:40:02.097
2016-04-13T08:13:26.297
8000
15129
question
highcharts
Highcharts（複数グラフでのツールチップ表示）


`tooltip.shared = true` を試してみて下さい。

<http://api.highcharts.com/highcharts#tooltip.shared>

[bar-basic](http://www.highcharts.com/demo/bar-basic "bar-
basic")のデモに適用すると以下のようになります。

[code]

    $(function () {
        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Historic World Population by Region'
            },
            subtitle: {
                text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
            },
            xAxis: {
                categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Population (millions)',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                valueSuffix: ' millions',
                shared: true
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -40,
                y: 80,
                floating: true,
                borderWidth: 1,
                backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Year 1800',
                data: [107, 31, 635, 203, 2]
            }, {
                name: 'Year 1900',
                data: [133, 156, 947, 408, 6]
            }, {
                name: 'Year 2012',
                data: [1052, 954, 4250, 740, 38]
            }]
        });
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    
    <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
[/code]


CC BY-SA 3.0
2016-04-12T09:28:15.817
23950
2016-04-12T09:43:31.480
2016-04-12T09:43:31.480
2238
2238
23943
answer