使用Chart.js在饼图和圆环图上显示图表数据

Chart.js - 饼图和圆环图的图表数据(Chart.js - In Graph Data for Pie & Doughnut Charts)

我需要在图表上显示数据。 就像这个设计一样，Chart.js有可能吗？ 或者可能有一个扩展名吗？

I need to display data on a chart. Like on this design Is it possible with Chart.js? Or maybe there is an extension for this?

原文：https://stackoverflow.com/questions/34636707

更新时间：2020-02-25 07:59

最满意答案

您可以使用Chart.js在设计中生成图表。

var data = [

{

value: 20,

color:"#F7464A"

},

{

value: 13.3,

color: "#46BFBD"

},

{

value: 6.7,

color: "#FDB45C"

},

{

value: 6.7,

color: "#FDB45C"

},

{

value: 6.7,

color: "#FDB45C"

},

{

value: 46.6,

color: "#FDB45C"

}

]

var options =

{

animation: false,

tooltipTemplate: "%",

tooltipFillColor: "rgba(0,0,0,0)",

tooltipFontColor: "rgba(1,1,1,1)",

tooltipCaretSize: 0,

tooltipFontStyle: "bold",

tooltipEvents: [],

onAnimationComplete: function() { this.showTooltip(this.segments, true); }

}

var ctx = document.getElementById("myChart").getContext("2d");

var myPieChart = new Chart(ctx).Pie(data,options);

然而，标签的放置不是最佳的。

You can use Chart.js to generate a chart in your design.

var data = [

{

value: 20,

color:"#F7464A"

},

{

value: 13.3,

color: "#46BFBD"

},

{

value: 6.7,

color: "#FDB45C"

},

{

value: 6.7,

color: "#FDB45C"

},

{

value: 6.7,

color: "#FDB45C"

},

{

value: 46.6,

color: "#FDB45C"

}

]

var options =

{

animation: false,

tooltipTemplate: "%",

tooltipFillColor: "rgba(0,0,0,0)",

tooltipFontColor: "rgba(1,1,1,1)",

tooltipCaretSize: 0,

tooltipFontStyle: "bold",

tooltipEvents: [],

onAnimationComplete: function() { this.showTooltip(this.segments, true); }

}

var ctx = document.getElementById("myChart").getContext("2d");

var myPieChart = new Chart(ctx).Pie(data,options);

However the placement of the labels is not optimal.

2016-01-06

相关问答

在Chart.js v2.x中做这样的事情当然是可能的 我认为最好的方法是使用插件。 事实上， Cmyker对你连接的问题甚至更新他的帖子以显示这将如何在Charts.js v2.x中工作 看他的小提琴： https ： //jsfiddle.net/cmyker/ooxdL2vj/ 和相应的插件定义： Chart.pluginService.register({

beforeDraw: function(chart) {

var width = chart.chart.width,

...

如果我理解正确， 逻辑是创建一个函数，在接受的canvas上绘制图表。 就是这样，你可以在你想要的每个canvas上调用该函数。 例如： draw(document.getElementById("canvas"));

draw(document.getElementById("canvas2"));

请参阅以下代码： var allData =

[

[

{

value: 300,

color:"#F7464

...

你有2个选择： 如果您在更改数据后只是更新数据调用update()： myDoughnut.data.datasets[0].data[11] = 300;

myDoughnut.update();

更新图表 否则，首先用destroy()销毁图表并重新初始化图表： myDoughnut.destroy();

myDoughnut = new Chart(ctx, locData);

销毁图表 You have 2 options: If you are just updating dat

...

尝试这个。 更多信息请参阅饼图使用情况 。 评论是否有任何混淆 var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {

type: 'pie',

data: {

labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],

datasets: [{

...

一个简单的解决方法是添加另一个参数到你的函数来区分你的图表。 我选择使用此图表的id，以确保您不会影响另一个图表。 你首先需要编辑一些你的功能： // !!

// Don't forget to change the prototype

// !!

function drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, midLabel, id) {

var ctx = ctxElement;

var data = {

...

如果你仍然想让它工作，我就是这样做的：

$.ajax({

url:"getdata.php",

method:"GET",

success:function(data) {

console.log(data);

var malenum =[1];

var femalenum =[2];

var ctx = document.getElementById("myChart");

var myChart = new Chart(

...

迭代来自json响应的数据并将数据推送到数组中 var piedata = [];

$.each(yourJson,function(i,val){

piedata.push({value:val.value,color:val.color,label:val.label,labelColor:val.labelColor });

});

然后设置新的图表(ctx).Pie(piedata); Iterate over your data coming from json response a

...

您应该在options对象中使用percentageInnerCutout属性 let options = {

circumference: Math.PI,

rotation: 1.0 * Math.PI,

percentageInnerCutout: 10,

legend: {

display: false

},

layout:{

padding:40

},

}

您还可以使用ChartJs查看此问题如何改变圆环图的厚度。 PS据我所知，它取决于版

...

您可以使用Chart.js在设计中生成图表。 var data = [

{

value: 20,

color:"#F7464A"

},

{

value: 13.3,

color: "#46BFBD"

},

{

value: 6.7,

color: "#FDB45C"

},

{

value: 6.7,

color: "#FDB45C"

},

{

value:

...

是! 这绝对是可能的。 虽然您可以创建自己的插件，但我建议使用名为Chart.PieceLabel.js的ChartJS 插件 ，这样可以更容易地完成。 用法 在图表选项中添加以下内容 pieceLabel: {

mode: 'value'

}

var randomScalingFactor = function() {

return Math.round(Math.random() * 100);

};

var ctx = document.getElementById(

...