我正在尝试基于XML数据加载图表。我的脚本,一切正常。只是,问题是每个图表,应该有一个标题。并且标题根本没有出现。在for循环中,它动态创建convas,然后在调用HTML页面时启动Labels和Values。只是缺少的部分是每个图的标题。任何人都有任何想法吗?
var command = xmlDoc.getElementsByTagName("COMMAND");
for (var commandIndex = 0; commandIndex < command.length; commandIndex++) {
var canvas = document.createElement('canvas');
canvas.id = "Convas"+commandIndex;
canvas.width = 800;
canvas.style.zIndex = 8;
canvas.style.position = "inherit";
document.getElementById("chartdiv").insertBefore(canvas,document.getElementById
("Convas"+commandIndex));
var barData = {
labels : [{% for item in labels %}
"{{item}}",
{% endfor %}],
datasets : [
{
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)",
bezierCurve : false,
data : [{% for item in values %}
{{item}},
{% endfor %}]
}]
}
Chart.defaults.global.animationSteps = 50;
Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,0,0,0.8)";
Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = false;
Chart.defaults.global.scaleLineColor = "black";
Chart.defaults.global.scaleFontSize = 16;
// get bar chart canvas
var mychart =
document.getElementById("Convas"+commandIndex).getContext("2d");
steps = 100
max = 100
// draw bar chart
var LineChartDemo = new Chart(mychart).Line(barData, {
scaleOverride: false,
scaleSteps: steps,
scaleStepWidth: Math.ceil(max / steps),
scaleStartValue: 0,
scaleShowVerticalLines: false,
scaleShowGridLines : false,
barShowStroke : true,
scaleShowLabels: false,
bezierCurve: true,
options: { title: {display: true,text: 'FARShAD'}},
});
}})
答案 0 :(得分:0)
好吧,我找不到我的代码问题了。但是,我用另一种方式写了它。
var canvas = document.createElement('canvas');
canvas.id = "Convas"+commandIndex;
canvas.width = 800;
canvas.style.zIndex = 8;
canvas.style.position = "inherit";
document.getElementById("chartdiv").insertBefore(canvas,document.getElementById("Convas"+commandIndex));
var barData = {
labels : [{% for item in labels %}
"{{item}}",
{% endfor %}],
datasets : [
{
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(241, 14, 75, 1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(241, 14, 75, 1)",
backgroundColor: "rgba(241, 14, 75, 1)",
borderColor: "rgba(241, 14, 75, 1)",
bezierCurve : false,
fill: false,
label: "My First dataset",
data : [{% for item in values %}
{{item}},
{% endfor %}]
}]
}
var config = {
type: 'line',
data: barData,
options: {
responsive: true,
title:{
display:true,
text:'Chart.js Line Chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
},
ticks: {
min: 0,
max: 100,
// forces step size to be 5 units
stepSize: 5
}
}]
}
}
};
var mychart =
document.getElementById("Convas"+commandIndex).getContext("2d");
steps = 100
max = 100
// draw bar cha
var LineChartDemo = new Chart(mychart, config);