Кольцевая диаграмма Vanilla JS и HTML Canvas
>>> x={'a': 1, 'b': {'m': 4, 'n': 5, 'o': 6}, 'c': 3}
>>> u=x.copy()
>>> v=dict(x)
>>> import copy
>>> w=copy.deepcopy(x)
>>> x['a']=10
>>> x
{'a': 10, 'c': 3, 'b': {'m': 4, 'o': 6, 'n': 5}}
>>> u
{'a': 1, 'c': 3, 'b': {'m': 4, 'o': 6, 'n': 5}}
>>> v
{'a': 1, 'c': 3, 'b': {'m': 4, 'o': 6, 'n': 5}}
>>> w
{'a': 1, 'c': 3, 'b': {'m': 4, 'o': 6, 'n': 5}}
>>> x['b']['m']=40
>>> x
{'a': 10, 'c': 3, 'b': {'m': 40, 'o': 6, 'n': 5}}
>>> u
{'a': 1, 'c': 3, 'b': {'m': 40, 'o': 6, 'n': 5}}
>>> v
{'a': 1, 'c': 3, 'b': {'m': 40, 'o': 6, 'n': 5}}
>>> w
{'a': 1, 'c': 3, 'b': {'m': 4, 'o': 6, 'n': 5}}
1 ответ
Это простой случай знания некоторой тригонометрии и API текста холста.
Я использовал значения cos и sin от угла центра соответствующего фрагмента, чтобы установить горизонтальное и вертикальное выравнивание текста, например так:
this.ctx.textAlign = cos > 0 ? 'start' : 'end';
this.ctx.textBaseline = sin > 0 ? 'top' : 'bottom';
Кроме того, я добавил еще две опции для конструктор круговой диаграммы:
const monthlyPaymentChart = new Piechart({
canvas: canvas,
data: paymentInformation,
colors: pieChartColors,
doughnutHoleSize: 0.85,
labelDistanceFromOuterEdge: 5,
roomForLabels: 65,
});
-
roomForLabels - указывает, сколько места нужно зарезервировать для меток
, отображаемых за пределами круговой диаграммы в пикселях. Если ширина какого-либо ярлыка не помещается на холсте, это значение увеличивается, чтобы вместить его. -
labelDistanceFromOuterEdge - Насколько далеко метки находятся от края
круговой диаграммы в пикселях.
Для измерения текста я использовал функцию measureText API контекста canvas 2d. Вот почему шрифт и размер текста также задаются в начале конструктора Piechart
Полный код можно найти здесь: https://codepen.io/prtjohanson/pen/bZgQmY