В этой статье представлен пример кода для динамического рисования круговой диаграммы с использованием холста HTML5, и он доступен всем. Подробности следующие:
Давайте сначала посмотрим на рендеры
Это не относится к сторонним библиотекам, таким как jquery, но написано с использованием операций DOM и функций холста.
Круги, нарисованные на холсте, обычно делятся на сплошные и полые.
Согласно анализу спроса, мы знаем, что круг представляет собой сплошной круг.
1. Сначала используйте холст, чтобы нарисовать сплошной круг.
//Псевдокод var Canvas = document.createElement(canvas);var ctx = Canvas.getContext('2d');ctx.beginPath();ctx.arc(координата центра оси X, координата центра оси Y, радиус, начало угол, конечный угол);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();
2. Нарисуйте круговую диаграмму, используя разные цвета.
//Псевдокод var Canvas = document.createElement(canvas);var ctx = Canvas.getContext('2d');ctx.beginPath();ctx.arc(координата центра оси X, координата центра оси Y, радиус, зеленый начальный угол, зеленый конечный угол);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(координата центра круга по оси X, координата центра круга по оси Y, радиус, красный начальный угол, красный конечный угол) ;ctx.fillStyle = 'red';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(координата центра оси X, координата центра оси Y, радиус, желтый начальный угол, желтый конечный угол);ctx .fillStyle = 'yellow';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(координата центра круга по оси X, координата центра круга по оси Y, радиус, фиолетовый начальный угол, фиолетовый конечный угол) ;ctx.fillStyle = 'фиолетовый';ctx.closePath();ctx.fill();
3. Динамически рисуйте круговые диаграммы
На веб-сайте динамического рисования кругов обычно рекомендуются три метода: requestAnimationFrame, setInterval (время) и расчет динамического угла.
Здесь я использую первый метод requestAnimationFrame.
В процессе написания обнаружил проблему, то есть при динамическом рисовании круга он не рисуется по координатам центра круга. Чтобы решить эту проблему, вам необходимо переопределять координаты кисти холста как координаты исходного центра круга каждый раз, когда вы рисуете круг.
<!DOCTYPE html><html><head> <meta charset=utf-8> <title></title> <style> #graph {/* граница: 1 пиксель, сплошная черная высота: 100%; ширина: 100%; box-sizing: border-box;*/ } </style></head><body><div id=circle style=width: 500px;float: left;></div></body></html><script type=text/javascript>(function(window,undefined){ var data = [ {product: продукт 1, продажи: [192.44, 210.54, 220.84, 230.11220.85210.59205.49200.55195.71 ,187,46 ,180,66 ,170,90]}, {продукт:продукт2,продажи:[122,41 ,133,16 ,145,65 ,158,00 ,164,84 ,178,62 ,185,70 ,190,13 ,195,53 ,198,88 ,204,32 ,210,91]}, {продукт:продукт 3,продажи:[170,30 ,175,00 ,170,79 ,165,10 ,165,62 ,160,92 ,155,92 ,145,77 ,145,17 ,140,27 ,135,99 ,130.33]}, {product:product 4,sales:[165.64,170.15,175.10,185.32,190.90,190.01,187.05,183.74,177.24,181.90,179.54,175.98]}] var dom_circle = document.getElementById('circle'); if(dom_circle != undefined && dom_circle != null) { var Canvas = document.createElement(canvas); dom_circle.appendChild(canvas); var ctx = Canvas.getContext(' 2d'); вар defaultStyle = функция (Dom, холст) { if(Dom.clientWidth <= 300) { Canvas.width = 300; Dom.style.overflowX = auto } else { Canvas.width = Dom.clientWidth; } if(Dom.clientHeight <= 300) { Canvas.height = 300; Dom.style.overflowY = авто} еще {canvas.height = Dom.clientHeight; //Область оси координат //Обратите внимание, что фактическая область линейного графика немного меньше, чем эта возвращаемая величина { p1:'green', p2:'red', p3:'yellow', p4:'purple', x: 0, / /Левая координата оси координат на холсте y: 0, //Верхняя координата оси координат на холсте maxX: Canvas.width, //Правая координата оси координат на холсте maxY: Canvas.height , //Нижние координаты оси координат на холсте r:(canvas.width)/2, //Начальная точка ry:(canvas.height)/2, //Начальная точка cr: (canvas.width)/4, / /Radius startAngle :-(1/2*Math.PI), //Начальный угол endAngle:(-(1/2*Math.PI)+2*Math.PI), //Конечный угол xAngle:1*(Math .ПИ/180) //Смещение} } //Рисуем круг var tmpAngle = -(1/2*Math.PI); var ds = null; var sum = data[0]['sales'][0]+data[0 ] ['sales'][1]+data[0]['sales'][2]+data[0]['sales'][3] var процент1 = data[0]['sales'][0] / сумма* Math.PI * 2; переменная процент2 = данные[0]['продажи'][1]/сумма * Math.PI * 2 + процент1; переменная процент3 = данные[0]['продажи'][2]/сумма * Math.PI * 2 + процент2; вар процент4 = данные[0]['sales'][3]/sum * Math.PI * 2 + процент3; console.log(percent1); console.log(percent2); console.log(percent3); console.log(percent4); var tmpSum = 0; var drawCircle = function() { if(tmpAngle >= ds.endAngle) { return false; } else if(tmpAngle+ ds.xAngle > ds. endAngle) { tmpAngle = ds.endAngle } else { tmpAngle +=; ds.xAngle; tmpSum += ds.xAngle } // console.log(ds.startAngle+'***'+tmpAngle); // console.log(tmpSum); // ctx.clearRect(ds.x,ds. y,canvas.width,canvas.height); if(tmpSum > процент1 && tmpSum <percent2) { ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent1,tmpAngle); p2 } Еще если (tmpSum > процент2 && tmpSum <процент3) { ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent2,tmpAngle); p3 } Еще если (tmpSum > процентов3) { ctx.beginPath(); ctx.moveTo(ds.r,ds.ry);arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent3,tmpAngle); .beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle,tmpAngle); ctx.fillStyle = ds.p1; } ctx.closePath(); requestAnimationFrame(drawCircle); this.toDraw = function(){ ds= defaultStyle(dom_circle,canvas); // console.log(tmpAngle); // console.log(ds.xAngle) ctx.clearRect(ds.x,ds.y,canvas.width,canvas.height); } this.toDraw(); self = this; window.onresize = function() { self.toDraw() } }})(окно </script>
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.