- r - 以节省内存的方式增长 data.frame
- ruby-on-rails - ruby/ruby on rails 内存泄漏检测
- android - 无法解析导入android.support.v7.app
- UNIX 域套接字与共享内存(映射文件)
我使用过 chart.js 1.0,我的圆环图工具提示显示基于数据除以数据集的百分比,但我无法用图表 2.0 复制它。
我到处搜索,但没有找到可行的解决方案。我知道它会在选项下进行,但我尝试过的一切充其量只是使馅饼功能失调。
<html>
<head>
<title>Doughnut Chart</title>
<script src="../dist/Chart.bundle.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div id="canvas-holder" style="width:75%">
<canvas id="chart-area" />
</div>
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function(opacity) {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
};
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [
486.5,
501.5,
139.3,
162,
263.7,
],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C",
"#949FB1",
"#4D5360",
],
label: 'Expenditures'
}],
labels: [
"Hospitals: $486.5 billion",
"Physicians & Professional Services: $501.5 billion",
"Long Term Care: $139.3 billion",
"Prescription Drugs: $162 billion",
"Other Expenditures: $263.7 billion"
]
},
options: {
responsive: true,
legend: {
position: 'bottom',
},
title: {
display: false,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
}
};
window.onload = function() {
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx, config);{
}
};
</script>
</body>
</html>
最佳答案
更新:下面的答案显示了基于总数据的百分比,但 @William Surya Permana
有一个很好的答案,它根据显示的数据进行了更新 https://stackoverflow.com/a/49717859/2737978
在 options
中你可以传入一个 tooltips
对象(更多信息可以在 chartjs docs 阅读)
tooltips
的一个字段,为了得到你想要的结果,是一个带有label
字段的callbacks
对象。 label
将是一个函数,它接受您悬停的工具提示项和构成图表的数据。只需从该函数返回一个字符串,您希望将其放入工具提示中。
这是一个例子,它看起来像
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
//get the concerned dataset
var dataset = data.datasets[tooltipItem.datasetIndex];
//calculate the total of this data set
var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
return previousValue + currentValue;
});
//get the current items value
var currentValue = dataset.data[tooltipItem.index];
//calculate the precentage based on the total and current item, also this does a rough rounding to give a whole number
var percentage = Math.floor(((currentValue/total) * 100)+0.5);
return percentage + "%";
}
}
}
以及您提供的数据的完整示例
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function(opacity) {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
};
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [
486.5,
501.5,
139.3,
162,
263.7,
],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C",
"#949FB1",
"#4D5360",
],
label: 'Expenditures'
}],
labels: [
"Hospitals: $486.5 billion",
"Physicians & Professional Services: $501.5 billion",
"Long Term Care: $139.3 billion",
"Prescription Drugs: $162 billion",
"Other Expenditures: $263.7 billion"
]
},
options: {
responsive: true,
legend: {
position: 'bottom',
},
title: {
display: false,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
},
tooltips: {
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 + "%";
}
}
}
}
};
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx, config); {
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas-holder" style="width:75%">
<canvas id="chart-area" />
</div>
关于javascript - Chart.js 2.0 donut 工具提示百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37257034/
我的函数概念上都返回相同的东西,但结果可以采用不同的形式: function GetThingy() 有四个不同的函数,每个可以返回不同的东西: 0.071(代表增长 7.1% 的 float 值)
这个问题在这里已经有了答案: Int division: Why is the result of 1/3 == 0? (19 个回答) 关闭 4 年前。 有什么方法可以计算(例如)120 的 50
我四处寻找这个,它看起来很简单,但我无法让它工作。 我有一张表格,其中一列需要格式化为百分比。下面是我的代码,但它没有格式化单元格,它只是将它们保留为小数。 我想这是因为 cell ,即使声明为范围,
我刚刚开始使用 WPF。从那以后,我开始关注造型系统。我来自 CSS 背景,我想以百分比设置边距。 当前值以像素为单位
我有一个表,其中每一行都有一个描述字段和一个 bool 值。我正在尝试编写一个查询,我可以在其中按每个相应的描述进行分组,并查看 bool 值为真的次数百分比。 示例表: PID Gen
我从文档中发现,考虑到 orientdb 100% 使用磁盘缓存,它使用的最大大小为 70% 用于读取缓存,30% 用于写入缓存 ( http://orientdb.com/docs/last/plo
有什么方法可以获取 docker 容器内部而不是外部的 cpu 百分比吗?! docker stats DOCKER_ID 显示的百分比正是我需要的,但我需要它作为变量。我需要获取容器本身内部的 cp
我正在尝试计算数据集每列中类别的比例(百分比)。 示例数据: df <- data.frame( "Size" = c("Y","N","N","Y","Y"), "Type" =
我应该使用小数还是 float 在数据库中存储比率?特别是在 SQL2005 中。 最佳答案 这取决于您对准确性的需求。如果您可以容忍来自存储 float 的 IEEE 方法的典型错误,则使用 flo
我正在创建一个游戏,目前必须处理一些math.random问题。 我的Lua能力不是那么强,你觉得怎么样 您能制定一个使用 math.random 和给定百分比的算法吗? 我的意思是这样的函数: fu
如何在SQL中动态计算百分比? 假设您有一个名为 Classes 的下表: ClassSession StudentName -------------------------------
如何通过 jQuery 创建具有百分比的数字掩码输入?我是否让输入仅接受三个数字,并在用户完成输入时在数字后添加百分号(keyup)? 我不使用插件。 示例:1% 或 30% 或 99% 或 100%
我正在尝试构建一个工具,可以突出显示具有最高介数中心性的社交网络节点。我将所有网络节点的测量值计算到字典中,按顺序对字典进行排序,然后仅保留前 3 对。 我希望这个工具是可扩展的,所以我想保留前 10
MYSQL 中的人员如何将一个日期条目和分数的用户百分比与另一个日期条目和分数进行比较,从而有效地返回从一个日期到另一个日期的用户百分比增加情况? 几天来我一直在试图解决这个问题,但我已经没有想法了,
我需要进行查询,结果是百分比。 我现在的查询如下所示: select COUNT(CREATE_WEEKDAY), CREATE_WEEKDAY, COUNT(CREATE
我有一个图像上传功能,其工作原理如下: $('.update-insertimage-form').submit(function() { $(".submit-newupdate-btn").add
我的问题很简单,但我仍然找不到这个问题的答案... 假设我们有两个包含图像的容器。 我们有类似的东西 #containera { width: 50%; height: 50%; backgr
是否可以将 CSS 尺寸指定为除其父元素之外的另一个元素的百分比?例如,我想将 div 的 border-radius 指定为 div 宽度的 10%。但是,border-radius: 10% 在
我正在尝试设置按钮的大小并以百分比进行编辑 但是这个的线性大小是不同的。为什么? 最佳答案 您好,问题出在属性 box-sizing 上.默认为 input type
我将它用于我的页眉,该页眉在一页上下滚动页面中发生变化。我注意到它没有响应,所以我想问你是否知道一种使它响应的方法。就像将 0-690 更改为百分比,以便它可以在移动设备和电视屏幕上使用。 HTML
我是一名优秀的程序员,十分优秀!