Вращение круговой диаграммы chart.js с двумя точками данных для выравнивания обоих секторов по горизонтальной оси

Question

Было несколько ответов по StackOverflow с предложениями о том, как вращать круговую диаграмму с использованием фиксированного значения и опции rotation в Chart.js, но я пока не нашел, как создать формулу вращения, которая учитывает фактические значения данных и поворачивает диаграмму так, чтобы ее сектора всегда были выровнены по горизонтальной оси.

Пример:

https://i.imgur.com/RcpKlNw.png

(не удалось вставить изображение сюда; ТАК постоянно говорит, что не может подключиться к Imgur).

Есть ли какая-либо опция Chart.js для выравнивания центральной оси кругового сектора или мне нужно самому вычислять вращение?

Например, со значениями данных [5,10] Я могу добиться требуемого поворота с помощью формулы rotation: 120/180 * Math.PI, но я не уверен, как заставить формулу работать для динамических значений.

Answer 1

Хорошо, похоже, я правильно понял, используя пользовательскую формулу.Не уверен, возможно, это можно было бы сделать с меньшими усилиями:

var t1 = 5; // this will come from the server
var t2 = 10; // this will come from the server
var total = t1 + t2; 

// Chart.js draws the first data point from vertical axis
// by default. But if set rotation to 0, it draws at 90 degrees from vertical axis
// (that is - on horizontal axis to the right side).
// Calculating the chart rotation, so that the first sector
// is always facing the left side and is middle-aligned
// on horizontal axis, 
// thus the second sector also will be aligned to the right side.
var percentageOfT1 = t1 / total;
var sectorSizeDeg = 360.0 * percentageOfT1; // circle is 360 degrees 
// thus we can calculate sector degrees easily using the percentage
var halfOffsetDeg = sectorSizeDeg / 2.0;

// rotate 180-halfsector 
// to compensate for horizontal align and reach the middle line of the sector
var finalOffsetDeg = 180.0 - halfOffsetDeg;

...
// in Chart options:
rotation: finalOffsetDeg / 180.0 * Math.PI