Круговая диаграмма

104

SEO_87

28 декабря 2016, 17:49

635

Нужно нарисовать круговую диаграмму с жирной точкой на конце шкалы. Сама диаграмма не проблема, решений полно, но вот как добавить эту чертову точку я не знаю. Может кто подскажет решение?

http://jsfiddle.net/Aapn8/3410/

A

7

anzarsh

30 декабря 2016, 11:29

#1

var drawCircle2 = function(color, lineWidth, percent) {
		percent = Math.min(Math.max(0, percent || 1), 1);
		ctx.beginPath();
		ctx.arc(0, 0, radius, Math.PI * 2 * percent, Math.PI * 2 * percent, false);
		ctx.strokeStyle = color;
        ctx.lineCap = 'round'; // butt, round or square
		ctx.lineWidth = lineWidth + 2
		ctx.stroke();
};

drawCircle2('red', options.lineWidth, options.percent / 100);

например можно вот это добавить, и получится как здесь - http://codepen.io/anzarsh/pen/VmoNro

1

104

SEO_87

30 декабря 2016, 12:52

#2

anzarsh:

var drawCircle2 = function(color, lineWidth, percent) {

		percent = Math.min(Math.max(0, percent || 1), 1);

		ctx.beginPath();

		ctx.arc(0, 0, radius, Math.PI * 2 * percent, Math.PI * 2 * percent, false);

		ctx.strokeStyle = color;

        ctx.lineCap = 'round'; // butt, round or square

		ctx.lineWidth = lineWidth + 2

		ctx.stroke();

};



drawCircle2('red', options.lineWidth, options.percent / 100);

например можно вот это добавить, и получится как здесь - http://codepen.io/anzarsh/pen/VmoNro

Спасибо! С новым годом!

S

469

Sitealert

30 декабря 2016, 14:45

#3

anzarsh, хоть убей - ничего не вижу.

Ага. В моём файерфоксе срабатывает, только если в окончание пути добавить "хоть чего-нибудь"

ctx.arc(0, 0, radius, Math.PI * 2 * percent, Math.PI * 2 * percent+1/1000, false);

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.

Google: E-E-A-T не является фактором ранжирования

Зачем быть уникальным в мире, где все можно скопировать