Highcharts errorors with corsshairs

Question

我嘗試使用水平十字線作爲某種輔助線來比較錯誤條的上下端點。

從統計的角度來看，它是通過比較置信區間進行某種虛擬顯着性檢驗。

我的問題是，給出一個柱形圖我不能達到與十字線的錯誤條的下端點。

這裏is a fiddle（來自Highcharts的簡化演示）。

var chart; 
$(function() { 
    $('#container').highcharts({ 
    chart: { 
     zoomType: 'xy' 
    }, 
    title: { 
     text: 'Temperature vs Rainfall' 
    }, 
    xAxis: [{ 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }], 
    yAxis: [{ 
     title: { 
      text: 'Rainfall', 
      style: { 
       color: Highcharts.getOptions().colors[0] 
      } 
     }, 
     labels: { 
      format: '{value} mm', 
      style: { 
       color: Highcharts.getOptions().colors[0] 
      } 
     } 
    }], 
    tooltip:{ 
     crosshairs: [false, {color: 'red'}], 
     formatter: function(){ 
      return false; 
     } 

    }, 
    series: [{ 
     name: 'Rainfall', 
     type: 'column', 
     yAxis: 0, 
     data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
    }, { 
     name: 'Rainfall error', 
     type: 'errorbar', 
     yAxis: 0, 
     data: [[42, 51], [66, 73], [90, 110], [128, 136], [140, 150], [171, 179], [135, 143], [142, 149], [204, 220], [189, 199], [90, 110], [52, 56]], 
    }] 
    }); 
}); 

歡迎任何建議！

Answer 1

錯誤欄是SVG中的路徑，所以沒有像低/高部分那樣的東西。如果您檢查highcharts.src.js文件並搜索drawCrosshair，您會發現負責渲染十字線的方法。正如你所看到的，有行：

pos = (this.chart.inverted != this.horiz) ? point.plotX : this.len - point.plotY; 

這需要point.plotY得到的十字線的位置。在錯誤欄中，plotY是最重要的一點。如果您將point.plotY替換爲point.lowPlot（僅適用於錯誤欄！），則您將在錯誤欄的底部顯示十字準線。