我在 StackOverflow 上寻找了很长时间,寻找解决我的问题的方法。我已经知道它与 window.onload 有关,它在我的脚本中被打开了两次,但我无法修复它。我找了好几天了你们能帮帮我吗?
这是我的 chartBarSample.php
代码:
<script>
var optionsBar = {
responsive: true
};
var dataBar = {
labels: ["Outubro", "Novembro", "Dezembro"],
datasets: [
{
label: "CPF's Enviados",
fillColor: "#00335A",
strokeColor: "#00243F",
highlightFill: "#00243F",
highlightStroke: "#00192B",
data: [6920, 7226, 7969]
},
{
label: "Propostas Finalizadas",
fillColor: "#007CDA",
strokeColor: "#0066B4",
highlightFill: "#0066B4",
highlightStroke: "#005290",
data: [6325, 6825, 7586]
},
{
label: "Propostas Aprovadas",
fillColor: "#2B8B4A",
strokeColor: "#196431",
highlightFill: "#196431",
highlightStroke: "#114622",
data: [5463, 6606, 6501]
}
]
};
var optionsLine = {
responsive: true
};
var dataLine = {
labels: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
datasets: [
{
label: "Dados primários",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb()]
},
{
label: "Dados secundários",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90, 200, 87, 20, 50, 20]
}
]
};
function start(){
var ctx = document.getElementById("graficoBarra").getContext("2d");
var BarChart = new Chart(ctx).Bar(dataBar, optionsBar);
var ctx2 = document.getElementById("graficoLinha").getContext("2d");
var LineChart = new Chart(ctx2).Line(dataLine, optionsLine);
}
window.onload = start;
</script>
最佳答案
您的图表定义不正确,请尝试以下操作:
function start(){
var ctx = document.getElementById("graficoBarra").getContext("2d");
var BarChart = new Chart(ctx, {
type: 'bar',
data: dataBar,
options: optionsBar
});
var ctx2 = document.getElementById("graficoLinha").getContext("2d");
var LineChart = new Chart(ctx2, {
type: 'line',
data: dataLine,
options: optionsLine
});
}
Codepen 中的完整代码:2 Chart.js Charts 结果:
关于javascript - 多个图表不工作 Chart.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40430923/