[英]Make chartjs pie chart wiyh dynamic data
我無法顯示包含動態數據的ChartJS餅圖,我在Google上搜索了很多,也找不到解決方案,因此在這里為您提供幫助。
window.onload = function() {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos/1',
dataType: "json",
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function(data) {
// var dataResults = data.d.results;
var tempData = [{
EnterpriseProjectTypeName: 'first project'
},
{
EnterpriseProjectTypeName: 'first project'
},
{
EnterpriseProjectTypeName: 'first project'
},
{
EnterpriseProjectTypeName: 'second project'
},
{
EnterpriseProjectTypeName: 'third project'
},
{
EnterpriseProjectTypeName: 'test'
}
];
var itermeidiaryObject = {};
$.each(tempData, function(key, value) {
var epn = value.EnterpriseProjectTypeName;
var som = 0;
if (epn != null) {
itermeidiaryObject[epn] = ++itermeidiaryObject[epn] || 1;
}
var somme = som;
});
var finalObject = Object.keys(itermeidiaryObject).map(function(key) {
return {
label: key,
y: itermeidiaryObject[key]
}
});
var ctx = document.getElementById('myChart').getContext('2d');
var lables=tempData
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: finalObject,
datasets: [{
data: finalObject,
}]
},
options: {
responsive: false,
scales: {
xAxes: [{
ticks: {
maxRotation: 90,
minRotation: 80
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
});
}
這是html部分
<canvas id="myChart"></canvas>
</div><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
有人可以幫我嗎?
您要餅圖還是條形圖? 進行了一些編輯以使它成為餅圖,盡管您可以回到條形圖上,對標簽的處理方式進行一些編輯,因為看起來標簽需要是數組中的單個值。 可能是更好的方法,但這應該有所幫助。 這是餅圖。 您在HTML中也有一個流氓div。
window.onload = function() { $.ajax({ url: 'https://jsonplaceholder.typicode.com/todos/1', dataType: "json", method: "GET", headers: { "Accept": "application/json; odata=verbose" }, success: function(data) { // var dataResults = data.d.results; var tempData = [{ EnterpriseProjectTypeName: 'first project' }, { EnterpriseProjectTypeName: 'first project' }, { EnterpriseProjectTypeName: 'first project' }, { EnterpriseProjectTypeName: 'second project' }, { EnterpriseProjectTypeName: 'third project' }, { EnterpriseProjectTypeName: 'test' } ]; var itermeidiaryObject = {}; $.each(tempData, function(key, value) { var epn = value.EnterpriseProjectTypeName; var som = 0; if (epn != null) { itermeidiaryObject[epn] = ++itermeidiaryObject[epn] || 1; } var somme = som; }); var finalObject = Object.keys(itermeidiaryObject).map(function(key) { return { label: key, y: itermeidiaryObject[key] } }); var pievalues = finalObject.map(function(value, index) { return value.y; }); var labels = finalObject.map(function(value, index) { return value.label; }); var colorscheme = colors.slice(0, labels.length); console.log(labels); console.log(pievalues); console.log(finalObject); var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { labels: labels, datasets: [{ data: pievalues, backgroundColor: colorscheme }] }, options: { responsive: false, } }); } }); } var colors = ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"];
<canvas id="myChart"></canvas> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
我以為您在處理程序成功中提供的數據幾乎就是您以JSON返回的內容?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.