chartjs（react-chartjs-2）饼状图添加百分比显示

框架react

import React from 'react';
import {Pie} from 'react-chartjs-2';const data = {labels: ['1Red','2pit','3Yel','4Ye','5Ye','6Ye','7Y','8Y','9Yel','10Ye','11Y','12Ye',],datasets: [{data: [300, 50, 289,100,89,90,100,44,254,456,88,874],backgroundColor: ["#ff6384","#36a2eb","#ffce56","#00ffff","#0000ff","#a52a2a","#00008b","#008b8b","#a9a9a9","#006400","#bdb76b","#8b008b","#556b2f","#ff8c00","#9932cc","#8b0000","#e9967a","#9400d3","#ff00ff", "#ffd700","#008000","#4b0082","#f0e68c","#add8e6","#90ee90", "#d3d3d3","#ffb6c1","#00ff00","#ff00ff","#800000","#000080","#808000","#ffa500","#ffc0cb","#800080","#800080","#ff0000","#c0c0c0","#ffff00"],hoverBackgroundColor: ["#ff6384","#36a2eb","#ffce56","#00ffff","#0000ff","#a52a2a","#00008b","#008b8b","#a9a9a9","#006400","#bdb76b","#8b008b","#556b2f","#ff8c00","#9932cc","#8b0000","#e9967a","#9400d3","#ff00ff", "#ffd700","#008000","#4b0082","#f0e68c","#add8e6","#90ee90", "#d3d3d3","#ffb6c1","#00ff00","#ff00ff","#800000","#000080","#808000","#ffa500","#ffc0cb","#800080","#800080","#ff0000","#c0c0c0","#ffff00"],borderWidth:0}]
};
const lineOptions ={maintainAspectRatio: true,tooltips: {enabled: true,callbacks: {label: function (tooltipItem, data) {var dataset = data.datasets[tooltipItem.datasetIndex];var total = dataset.data.reduce(function (previousValue, currentValue, currentIndex, array) {return previousValue + currentValue;});var currentValue = dataset.data[tooltipItem.index];var percentage = Math.floor(((currentValue / total) * 100) + 0.5);return percentage + "%";},                    title: function (tooltipItem, data) {return data.labels[tooltipItem[0].index];},},},legend: {display: false,},layout: {padding: {left: 0,right: 0,top:50,bottom:20}},animation: {duration: 1,onComplete: function () {var chartInstance = this.chart,radian = 0,tmpRadian,middleRadian,ctx = chartInstance.ctx;Chart.defaults.global.defaultFontSize = 12 ;Chart.defaults.global.defaultFontFamily = 'PingFangTC';Chart.defaults.global.defaultFontStyle = '400';ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);ctx.textAlign = 'center';ctx.textBaseline = 'bottom';this.data.datasets.forEach(function (dataset, i) {var meta = chartInstance.controller.getDatasetMeta(i);meta.data.forEach(function (bar, index) {var data = dataset.data[index],x,y,r,dataPercentage,canvasWidth,canvasHeight,dataName,centerAngle;  r = (chartInstance.chartArea.bottom-chartInstance.chartArea.top)/2+20;//弧長centerAngle = bar._model.circumference;// 中間弧度radian = radian + centerAngle;tmpRadian = radian;middleRadian = tmpRadian - centerAngle/2// x、y坐標canvasWidth = bar._chart.chartArea.rightcanvasHeight = bar._chart.chartArea.bottom x = canvasWidth/2 + Math.sin(middleRadian) * r ;y = (canvasHeight+60)/2 -  Math.cos(middleRadian) * r ;//百分比dataPercentage =  Math.floor(((data/meta.total) * 100) + 0.5)dataName = bar._model.labelctx.fillStyle = '#222'ctx.fillText(dataName+':'+dataPercentage+'%',x,y,50);});});             }
}}export default React.createClass({displayName: 'PieExample',render() {return (<div>{/* <h2>Pie Example 111</h2> */}<Pie data={data} options={lineOptions}/></div>);}
});

chartjs（react-chartjs-2）饼状图添加百分比显示相关推荐

做饼状图时，显示百分比的解决方案
http://fluagen.blog.51cto.com/146595/86733 在项目中做饼状图时,显示百分比的解决方案: 饼图显示百分比在饼图中JFreeChart默认只显示选项和数值,没有 ...
MpAndroidChart源码修改之饼状图添加标志线
由于项目需要,需要改MpandroidChart源码,下面,先看下效果图: 效果图效果很简单,但是由于所选依赖库没提供相关方法,所以就需要重写源码了. 这条红色的标志线其实就是那个影厅的均值嘛,这条 ...
JFreeChart框架中生成饼状图上怎样显示数据 [问题点数：40分，结帖人GreenLawn]
我用JFreeChart框架生成饼状图,但想把数据信息在饼图上显示,是在饼图内部(即圆内)显示!怎样实现啊?? 去掉lable pieplot.setLabelGenerator(null); 去掉线 ...
echarts 饼状图扇面上显示文字和百分比
app.title = '饼图';option = {tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} ({d}%) ...
封装构造函数，用canvas写饼状图和柱状图
封装构造函数,用canvas写饼状图和柱状图封装函数 // 场景 function XDLScence( options ) {this.stage = options.stage;//执行场景的初 ...
Angular2组件与Echarts饼状图交互之饼图制作
一.前言 1.基于ng4项目 2.组件包括:根组件app和饼状图组件echart 二.饼状图开发过程 1.添加插件 echart cnpm install echarts --save 2.创建组件 ...
python excel数据分析画直方图饼状图_Excel数据可视化应用（直方图、折线图、饼状图）...
直方图:对比关系直方图是一种统计报告图,是表示资料变化情况的主要工具.直方图由一系列高度不等的的纵向条纹或线段表示数据分布的情况.一般用横轴表示数据类型,纵轴表示分布情况. 例1: 1.右键单击图表 ...
JFreeChart在Struts2中实现饼状图统计
在Struts2中,用JFreeChart实现饼状图统计前段时间学习了一下JFreeChart,现在来整理一下自己所作的实例. 下面分别用两种方式来实现: 一种是以java应用程序的方式,一种是以w ...
JFreeChart在Struts2中实现3D饼状图统计
在Struts2中,用JFreeChart实现3D饼状图统计前段时间学习了一下JFreeChart,现在来整理一下自己所作的实例. 下面分别用两种方式来实现: 一种是以java应用程序的方式,一种是 ...

chartjs（react-chartjs-2）饼状图添加百分比显示

chartjs（react-chartjs-2）饼状图添加百分比显示相关推荐

最新文章

热门文章

chartjs（react-chartjs-2） 饼状图添加百分比显示

chartjs（react-chartjs-2） 饼状图添加百分比显示相关推荐

最新文章

热门文章

chartjs（react-chartjs-2）饼状图添加百分比显示

chartjs（react-chartjs-2）饼状图添加百分比显示相关推荐