獲取高位圖柱形圖中每個小節的終點

我正嘗試在每個小節結束時創建一個箭頭指向下一小節。爲此，我需要知道每個小節的終點座標。請參閱下面的圖片以獲得更多關於我想要實現的內容。獲取高位圖柱形圖中每個小節的終點

我現在的做法是讓圖表對象內的每個系列[0] .points [i]中的clientX添加到plotWidth中，以便達到我需要渲染箭頭圖像的點。由於箭頭渲染不正確，現在似乎無法正常工作。我現在有一個小提琴與我目前的做法。我試圖在每個小節結束處實現'X'，現在它出現在中間的某個位置。

下面是問題的jsfiddle - http://jsfiddle.net/qp90yx34/1/

下面是我在目前位置的代碼 - 我認爲你應該能夠改變x位置

$(function() { 
 
    $('#container').highcharts({ 
 
    chart: { 
 
     type: 'column', 
 
     events: { 
 
     load: function() { 
 
      _.each(this.series[0].points, (point, key) => { 
 
      if (!_.isUndefined(this.series[0].points[key + 1])) { 
 
       this.renderer.text("X", 
 
       point.clientX + point.pointWidth, //x 
 
       point.plotY) // y 
 
       .add(); 
 
      } 
 
      }) 
 
     }, 
 
     } 
 
    }, 
 
    title: { 
 
     text: '', 
 
    }, 
 
    plotOptions: { 
 
     series: { 
 
     dataLabels: { 
 
      enabled: false, 
 
      format: '<b>{point.name}</b> ({point.y:,.0f})', 
 
     }, 
 
     } 
 
    }, 
 
    legend: { 
 
     enabled: false 
 
    }, 
 
    xAxis: { 
 
     categories: ['Test 1', 'Test 2', 'Test 3', 'Test 4', 'Test 5'] 
 
    }, 
 
    series: [{ 
 
     type: 'column', 
 
     name: 'Marks', 
 
     data: [83, 72, 71, 63, 74] 
 
    }] 
 
    }); 
 
});

來源

2017-06-02 Amith M S

你應該能夠改變一點點你的x位置，因此也將採取chart.plotLeft參數（抵消你plotArea從圖表容器的左邊緣）的HTTP：// jsfiddle.net/qp90yx34/2/ –

renderer.text方法內的文字：

 this.renderer.text("X", 
      point.clientX + point.pointWidth/2 + chart.plotLeft, //x 
      point.plotY) // y 
     .add();

在此方法中，我添加了chart.plotLeft，這是圖表的左邊緣和plotArea之間的距離。

我也改變point.pointWidth到point.pointWidth/2因爲point.clientX是列中心的像素位置。

活生生的例子： http://jsfiddle.net/qp90yx34/2/

來源

2017-06-02 13:25:37

謝謝，這完美地解決了我的問題。 –

獲取高位圖柱形圖中每個小節的終點

回答

相關問題