1

我在我的应用程序中使用 Highstock-1.2.4 和 jQuery。在其中一个对话框中，我将 highstocks 堆叠列。

我的问题是，如果存在具有大 y 轴值（例如 200 单位）的图以及具有小 y 轴值（例如 1 单位）的图，则小图的工具提示将无法正确显示。

为了更好地理解，我提供了示例。

在上面的例子中，“jan”的图形非常小。如果你将鼠标悬停在它上面（即 jan），你会得到系列 '3' 和 '4' 的工具提示，这是预期的。现在，如果您调整图形的大小（使用右上角的调整大小处理程序）以减小图形宽度，然后将鼠标悬停在“jan”处的小图形上，您只会获得系列 4（即 0）的工具提示。

请有人指导如何处理此类问题。

示例代码：

<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>

<div id="resizer" style="min-width: 350px; min-height: 200px">
    <div id="inner-resizer">
        <div id="container" style="height: 300px">
        </div>
    </div>
</div>



var container = $('#container')[0];
$('#resizer').resizable({
    resize: function() {
        chart.setSize(
            this.offsetWidth - 20,
            this.offsetHeight - 20,
            false
        );
    }
});

var chart = new Highcharts.Chart({
chart: {
    renderTo: 'container',
        type: 'column',
        zoomType:'xy'
},
credits: {
    enabled: false
},

xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
plotOptions: {
        series: {
            stacking: 'normal'
        }
    },

series: [{
        data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [0,176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    },
            {
        data: [5, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [0,176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }]

});

4

1 回答 1

1

我认为这不是工具提示问题，当您将图形调整为非常小的尺寸时，无法比常规尺寸更完美地判断鼠标悬停。

甚至，如果您在图表上方显示常规尺寸，稍后会显示其他系列的工具提示。

我可以在这里建议的是尝试

tooltip:{
        shared:true
    }

链接：http: //jsfiddle.net/mhardik/yPLjR/623/

有了这个，即使尺寸较小，您也可以获得工具提示。

编辑：

放

plotOptions: {
            series: {
                stacking: 'percent'
            }
        }

这将相对于百分比设置列高。因此，即使值非常低，您也会得到 bar。

于 2012-12-19T10:05:53.510 回答