Highcharts：數據標籤放置在餅圖的部分中間

我想而不管顯示在部分中間的餅圖的數據標籤：無論是部分已切片Highcharts：數據標籤放置在餅圖的部分中間

或不
無論是在plotOptions size屬性已經提到或不

溶液1

爲此，我嘗試使用plotOptions的距離屬性。我在圖表的load（）事件中得到了系列[0] .points [0] .shapeArgs.r中的半徑。然後使用下列內容：

series[0].update({ 
    dataLabels: { 
     distance: -(radius/2) 
    } 
});

http://jsfiddle.net/k94x958d/2/

但是這提出了兩個問題：餅圖加載動畫丟失，如果任何部分切成薄片，數據標籤放置不正確

http://jsfiddle.net/k94x958d/3/

解決方案2

解析ani mation問題，我嘗試使用上面的邏輯來獲取距離，然後在Highcharts庫的覆蓋drawDataLabels（）方法中將其設置爲[0] .options.dataLabels中的系列[0]。但它沒有奏效。

有沒有什麼辦法可以實現數據標籤在餅圖部分的中間放置，而不管大小，切片等等？

來源

2016-07-06 sagargurtu

我們可以在負載情況下使用下面的代碼：

series[0].update({ 
    animation: true, 
    dataLabels: { 
     distance: -(series[0].points[0].shapeArgs.r/2) 
    } 
}); 

_.each(series[0].points, function(point) { 
    var x = point.slicedTranslation.translateX + point.dataLabel.translateX, 
     y = point.slicedTranslation.translateY + point.dataLabel.translateY; 

    point.dataLabel.attr({ 
     transform: 'translate(' + x + ',' + y + ')' 
    }); 
});

上面的代碼解決切片和大小的問題。看起來，調用attr（）會保留動畫。仍然存在的唯一問題是由於調用update（）而導致動畫丟失。

[編輯] 的方式，因爲切片的數據標籤已被翻譯，有沒有辦法使用ATTR將其轉化到部分中部（）？

[編輯] 解決..只要把動畫：真正的更新（）。

來源

2016-07-07 09:10:13 sagargurtu

這是一個很好的問題，我特別喜歡使用圖表半徑（而不是固定值）計算數據標籤距離的方法。

我一直在用你的小提琴工作一段時間。不幸的是，我不認爲你問的是可能的。

由於您想要移動餅圖切片部分的數據標籤以使其位於該切片的中心，因此您希望將slicedOffset值添加到該數據標籤的distance屬性中。

我想象的是這樣的：

events: { 
    load: function() { 
    var series = this.series[0], 
     distance = series.points[0].shapeArgs.r/2, 
     pieOffset = this.options.plotOptions.pie.slicedOffset; 
    $.each(series.points, function(index, value) { 
     if (typeof value.sliced === "undefined") { 
     value.update({ 
      dataLabels: { distance: -distance } 
     }); 
     } else { 
     value.update({ 
      dataLabels: { distance: -distance - pieOffset } 
     }); 
     } 
    }); 
    } 
}

然而，沒有什麼變化。看起來您可以定義數據標籤在系列級別（或整個餅圖）的距離，但不在點級別。

按照Highcharts API，你應該能夠設置任何屬性爲series.data.dataLabels，你會plotOptions.series.dataLabels（見http://api.highcharts.com/highcharts#series<pie>.data.dataLabels），但只有特定的一些工作（例如，如果一個特定點的數據標籤設置rotation ，那出現了，但不是distance）。

這是你的小提琴修改後的版本與我的失敗的實驗：現在http://jsfiddle.net/brightmatrix/k94x958d/5/

，解決您的其他項目有關的一系列不動畫，當你更新它，我想這可能是因爲您要更新在你的負載事件中的系列，而不是事後單獨的事件。有幾個示例顯示如何使用setData()或setVisible()強制進行動畫製作，但當我更新load事件時，這兩種解決方案都無法正常工作。

這裏是我研究的問題：

在這種情況下，也許你可以有一個jQuery事件（的圖表選項之外），該網頁上觸發加載強制動畫。

我希望這些信息對您有所幫助。我也希望Highcharts的開發人員能夠對我的研究權衡一下。

來源

2016-07-06 12:23:03

Highcharts：數據標籤放置在餅圖的部分中間

回答

相關問題