Question

我有一个图表，其中两行在某些点中具有相同的值。这导致一条线在另一条线之上，而另一条线＃34;消失＆＃34;
关于如何避免这种情况的建议？
http://jsfiddle.net/t2jyfLds/1/

$(function () {
  $('#container').highcharts({
    title: {
        text: 'Monthly Average Temperature',
        x: -20 //center
    },
    subtitle: {
        text: 'Source: WorldClimate.com',
        x: -20
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 17.0, 17.0, 17.0, 17.0, 17.0, 17.0, 7]
    }, {
        name: 'New York',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 17.0, 17.0, 17.0, 17.0, 17.0, 10]
    }]
  });
});

Answer 1

正如您的问题中的评论所指出的，当共享相同图表的线具有相同的点时，这是预期的行为。

您可以为特定行指定一个z-index值，以便将其显示在图表中的其他行之上（请参阅http://api.highcharts.com/highcharts#series<line>.zIndex），但这不会解决另一行的问题线条被遮挡。

我首选的方法是使用共享工具提示。这样，当用户将鼠标悬停在任何行的标记上时，您将看到所有行的数据点。

请参阅下面的示例屏幕截图：

您需要做的只是将shared: true添加到tooltip属性中（请参阅http://api.highcharts.com/highcharts#tooltip.shared）。您还可以使用formatter函数为工具提示提供更丰富的字体类型，字体大小等。

我希望这对你有所帮助。

Highcharts - 多线图 - 线以上线

1 个答案: