canvas——餅狀圖繪製文字

阿新 • • 發佈：2019-01-12

重點：計算文字應放的位置座標。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>餅狀圖繪製文字</title>
</head>
<body>
<div id="container">
    <canvas id="cavsElem">
        您的瀏覽器不支援canvas，請升級瀏覽器
    </canvas>
</div>
<script>
    (function(){
        var canvas = document.getElementById('cavsElem');
        var ctx = canvas.getContext('2d');
        canvas.width = 600;
        canvas.height = 600;
        canvas.style.border = '1px solid red';

        var data = [{
            "value": .2,
            "color": "red",
            "title": "大專"
        },{
            "value": .4,
            "color": "blue",
            "title": "本科"
        },{
            "value": .3,
            "color": "green",
            "title": "碩士"
        },{
            "value": .1,
            "color": "orange",
            "title": "博士"
        }];

        //定義起始角度
        var tempAngle=-90;
        //定圓心位置
        var x0=300,y0=300;
        //定半徑長度
        var radius=200;
        //從-90度開始繪製
        for(var i=0; i<data.length; i++){
            ctx.beginPath();
            ctx.moveTo(x0,y0);
            //當前扇形角度
            var angle = data[i].value*360;
            //當前扇形起始繪製弧度
            var startAngle = tempAngle*Math.PI/180;
            //當前扇形借結束繪製弧度
            var endAngle = (tempAngle + angle)*Math.PI/180;
            //繪製扇形
            ctx.arc(x0,y0,radius,startAngle,endAngle);
            ctx.stroke();
            //填充扇形
            ctx.fillStyle = data[i].color;
            ctx.fill();

            //繪製文字
            //提取要繪製的文字內容
            var txt = data[i].value*100+'%';
            //計算文字要放的角度
            var txtAngle = tempAngle + 1/2*angle;
            //計算文字要放的座標位置
            var x,y;
            x=x0+Math.cos(txtAngle*Math.PI/180)*(radius+20);
            y=y0+Math.sin(txtAngle*Math.PI/180)*(radius+20);
            //如果文字在圓形的左側，那麼讓文字 對齊方式為 文字結尾對齊當前座標。
            if(txtAngle>90 && txtAngle<270){
                ctx.textAlign = 'end';
            }
            //文字繪製到扇形旁邊
            ctx.fillText(txt,x,y);

            //當前扇形結束繪製角度，即下一個扇形開始繪製角度
            tempAngle += angle;
        }
    })();
</script>
</body>
</html>

效果：

canvas——餅狀圖繪製文字

重點：計算文字應放的位置座標。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>餅狀圖繪製文字</tit

canvas繪製餅狀圖

話不多說直接上程式碼 <canvas width="600" height="400"></canvas> <script> var PieChart = function (ctx) { /*繪製工具

Canvas(3)---繪製餅狀圖

Canvas(3)---繪製餅狀圖有關canvas之前有寫過兩篇文章 1、Canvas(1)---概述+簡單示例 2、Canvas(2)---繪製折線圖在繪製餅狀圖之前，我們先要理解什麼是圓弧,如何在畫布中繪製文字等等。所以這裡將繪製餅狀圖理解拆分成以下幾個步驟： 1、理解圓弧 2、繪製一段圓弧 3、繪

第166天：canvas繪制餅狀圖動畫

padding new gree component adding 文本 add function 填充 canvas繪制餅狀圖動畫 1、HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head

繪製matplotlib 餅狀圖

參考：https://blog.csdn.net/ScarlettYellow/article/details/80458797 （2）2016年就業人員在三次產業中分佈的餅狀圖。 def

【eCharts】echarts餅狀圖資料重疊導致指示線及顯示文字重疊解決

轉載自：https://www.cnblogs.com/minjh/p/9081893.html 先看他的，再看我的，不看我的也行 1. 解決前 2.解決後 3.程式碼 function makePie(id, title, name,

EChart 文字大小調整餅狀圖為例

源碼 har enter 價格 alt style 圖片 legend 4.5 一、EChart圖中的文字調整（以餅圖為例）二、源碼： {　　"title": { 　　　　"text": "", 　　　　"subtext": "", 　　　　"x": "cent

QChartView繪製餅狀圖

效果圖： #include "mainwindow.h" #include "form.h" #include <QApplication> #include <QtCharts> #include <QPieSerie

EChars學習(繪製餅狀圖,南丁格爾圖)

心靈一語: 對於世界而言，你是一個人；但是對於某個人，你是他的整個世界 --《飄》簡單直

原生js和canvas實現的柱狀圖、餅狀圖、折線圖

轉載來自https://blog.csdn.net/u013302113/article/details/77985744 <html> <head lang="en"> </head> <body> &

使用MPAndroidChart繪製多條折線圖和餅狀圖部分問題備錄

餅狀圖餅狀圖基本使用 /** * 繪製PieChart(餅圖) * * @param entries */ private void drawPieChart(ArrayList<PieEntry> entries

自定義View繪製餅狀圖和環狀圖

最近工作中遇到一個需求，就是將不同年齡段資料以餅狀圖或者環狀圖的形式展示出來。於是利用android自定義的知識封裝一個自定義View,方便日後使用，特此記錄。效果圖如下 1.餅狀圖 1.環狀圖主要強調以下3部分 1.value中新增attr

Matplotlib 餅狀圖中的文字中文亂碼問題

今天用matplotlib畫餅狀圖時候遇到中文亂碼，一般遇到中文亂碼有兩種通用的解決方法，一種是修改matplotlibrc，通過修改matplotlibrc中的font.sans-serif新增中文，一種是直接在程式碼中通過rcParams修改字型，既然遇到亂碼當然先用傳統方法試試，程式碼如下：可

echarts餅狀圖隱藏標示線和標示文字

//在建專案分佈餅狀圖 proHoursPieOption = { title : { // text: '材價來源佔比分析', x: 15, y: 15, textStyle

iOS使用Charts框架繪製—餅狀圖

首先先看一下效果: 餅狀圖一、建立餅狀圖物件建立餅狀圖物件用到類是PieChartView.h, 程式碼如下: self.pieChartView = [[PieChartView alloc] init]; self.pieChartView.backgroundC

基於SpringMVC框架使用ECharts3.0實現折線圖，柱狀圖，餅狀圖,的繪製

頁面部分：<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

Echarts餅圖中間顯示自定義內容及解決柱狀圖橫座標文字過多顯示不全的問題

1.Echarts餅狀圖中間自定義顯示內容（文字、圖片）實現這種效果主要是通過graphic中的物件屬性type和style實現，type設定為‘text’，則style中可以設定文字內容，type設定為‘image’,則style中可以設定圖片內容，以下是完整程式碼：

使用css3制作正方形、三角形、扇形和餅狀圖

radi spa over pointer tran ima 得到 lin 引入 1.利用邊框制作正方形如果將盒容器的width和height設置為0，並為每條邊設置一個較粗的width值和彼此不同的顏色，最終會得到四個被拼接在一起三角形，它們分別指向不同的顏色。 htm

JavaScript+svg繪制的一個餅狀圖

圖例 n) attribute 數字類型 XML 用戶 h+ htm type svg參考：https://www.w3.org/TR/SVG/<body onload=‘document.body.appendChild( pieChart([12,23,34

PHP畫矩形，橢圓，圓，畫橢圓弧，餅狀圖

tro lips ade inpu 統計起點 com eth func 1：畫矩形： imagerectangle ( resource $image , int $x1 , int $y1 , int $x2 , int $y2 , int $col ) imagere

canvas——餅狀圖繪製文字

相關推薦