http://www.chartjs.org/docs
Chart.js güncel sürümünü indirdim burada line chart yapmak istiyorum ancak örnekler klasörü renkleri benim belirlememi engelliyor :(
rica etsem Burada 1.sıradaki grafik gibi yapmama yardım edebilir misiniz?
Chart.js Grafik oluşturma problemi? |
3 Mesajlar | 1.574 Okunma | ||
- Üyelik 28.11.2013
- Yaş/Cinsiyet 30 / E
- Meslek Ameliyathane Hemşiresi
- Konum Afyon
- Ad Soyad I** Ç**
- Mesajlar 2633
- Beğeniler 344 / 487
- Ticaret 12, (%100)
- Üyelik 14.08.2016
- Yaş/Cinsiyet 29 / E
- Meslek Web Developer
- Konum İzmir
- Ad Soyad A** B**
- Mesajlar 159
- Beğeniler 54 / 42
- Ticaret 1, (%100)
Nasıl engelliyor ? hata nerede. Onları söylersen yardımcı olabiliriz, bu chartsların yapımı için kodlar sitesinde hali hazırda veriliyor çünkü
- Üyelik 28.11.2013
- Yaş/Cinsiyet 30 / E
- Meslek Ameliyathane Hemşiresi
- Konum Afyon
- Ad Soyad I** Ç**
- Mesajlar 2633
- Beğeniler 344 / 487
- Ticaret 12, (%100)
Nasıl engelliyor ? hata nerede. Onları söylersen yardımcı olabiliriz, bu chartsların yapımı için kodlar sitesinde hali hazırda veriliyor çünkü
HOcam örnekte renkler rastgele geliyor js bilmiyorum 1 gün uğraştım en son buldum :(
Line Chart
<script></script>
<script></script>
<script>
// var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
//return 0;
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function(opacity) {
return 'rgba("75,192,192,0.4")';
};
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [450, 248, 460,190,400,210, 220],
fill: true,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
borderDash: [5, 5],
},
{
label: "My Second dataset",
fill: true,
backgroundColor: "rgb(43, 84, 127)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
data: [150,160,190,170,160,165,160],
}]
},
options: {
responsive: true,
title:{
display:true,
text:'Chart.js Line Chart'
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
// beforeTitle: function() {
// return '...beforeTitle';
// },
// afterTitle: function() {
// return '...afterTitle';
// },
// beforeBody: function() {
// return '...beforeBody';
// },
// afterBody: function() {
// return '...afterBody';
// },
// beforeFooter: function() {
// return '...beforeFooter';
// },
// footer: function() {
// return 'Footer';
// },
// afterFooter: function() {
// return '...afterFooter';
// },
}
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
},
ticks: {
suggestedMin: 0,
suggestedMax: 250,
}
}]
}
}
};
/*
$.each(config.data.datasets, function(i, dataset) {
dataset.borderColor = 'rgba(75,192,192,0.4)';
dataset.backgroundColor = 'rgb(43, 84, 127)';
dataset.pointBorderColor = 'rgb(219, 39, 39)';
dataset.pointBackgroundColor = 'rgba(75,192,192,0.4")';
dataset.pointBorderWidth = 1;
});
*/
window.function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
/*
$('#randomizeData').click(function() {
$.each(config.data.datasets, function(i, dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
});
window.myLine.update();
});
$('#changeDataObject').click(function() {
config.data = {
labels: ["July", "August", "September", "October", "November", "December"],
datasets: [{
label: "My First dataset",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
fill: false,
}, {
label: "My Second dataset",
fill: false,
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
}]
};
$.each(config.data.datasets, function(i, dataset) {
dataset.borderColor = randomColor(0.4);
dataset.backgroundColor = randomColor(0.5);
dataset.pointBorderColor = randomColor(0.7);
dataset.pointBackgroundColor = randomColor(0.5);
dataset.pointBorderWidth = 1;
});
// Update the chart
window.myLine.update();
});
$('#addDataset').click(function() {
var newDataset = {
label: 'Dataset ' + config.data.datasets.length,
borderColor: randomColor(0.4),
backgroundColor: randomColor(0.5),
pointBorderColor: randomColor(0.7),
pointBackgroundColor: randomColor(0.5),
pointBorderWidth: 1,
data: [],
};
for (var index = 0; index < config.data.labels.length; ++index) {
newDataset.data.push(randomScalingFactor());
}
config.data.datasets.push(newDataset);
window.myLine.update();
});
$('#addData').click(function() {
if (config.data.datasets.length > 0) {
var month = MONTHS[config.data.labels.length % MONTHS.length];
config.data.labels.push(month);
$.each(config.data.datasets, function(i, dataset) {
dataset.data.push(randomScalingFactor());
});
window.myLine.update();
}
});
$('#removeDataset').click(function() {
config.data.datasets.splice(0, 1);
window.myLine.update();
});
$('#removeData').click(function() {
config.data.labels.splice(-1, 1); // remove the label first
config.data.datasets.forEach(function(dataset, datasetIndex) {
dataset.data.pop();
});
window.myLine.update();
});
*/
</script>
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)