我用来绘制 Shield UI 折线图的代码如下所示。将鼠标悬停在每个点上时，我可以获得标签(正确/错误)。但我需要显示图表上打印的标签(正确/错误)来代替 4、0、1、2、3、4 等数据值。
$(function() {
$("#chart").shieldChart({
chartAreaBorderColor: '#E8E8E8',
theme: 'dark',
chartAreaBorderWidth: 1,
primaryHeader: {
text: "Quiz Attendance"
},
exportOptions: {
image: false
},
seriesSettings: {
line: {
dataPointText: {
enabled: true,
style: {
fontWeight: "bold"
}
}
}
},
tooltipSettings: {
customHeaderText: "Your answer was:",
customPointText: function(point, chart) {
return shield.format(
'<span><b>{value}</b></span>', {
value: point.pointName
}
);
}
},
axisY: {
min: 0,
max: 4 // four levels max
},
axisX: {
categoricalValues: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8', 'Q9', 'Q10', 'Q11', 'Q12', 'Q13', 'Q14', 'Q15', 'Q16']
},
dataSeries: [{
seriesType: 'line',
color: "#FFD500",
collectionAlias: 'Your quiz attendance',
data: [{
y: 4,
pointName: "Right"
}, {
y: 0,
pointName: "Right"
}, {
y: 1,
pointName: "Right"
}, {
y: 2,
pointName: "Right"
}, {
y: 3,
pointName: "Right"
}, {
y: 4,
pointName: "Right"
}, {
y: 3,
pointName: "Wrong"
}, {
y: 2,
pointName: "Wrong"
}, {
y: 1,
pointName: "Wrong"
}, {
y: 0,
pointName: "Wrong"
}, {
y: 1,
pointName: "Right"
}, {
y: 2,
pointName: "Right"
}, {
y: 3,
pointName: "Right"
}, {
y: 4,
pointName: "Right"
}, {
y: 4,
pointName: "Right"
}, {
y: 3,
pointName: "Wrong"
}]
}]
});
});<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Altoopa Research and Concepts Private Limited</title>
<link id="themecss" rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light-bootstrap/all.min.css" />
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/chart/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/chart/js/shield-chart.all.min.js"></script>
</head>
<body>
<div style="width: 960px; min-height: 500px; margin: 0 auto;">
<div id="chart"></div>
</div>
</body>
</html>最佳答案
您可以使用格式函数或直接修改任何给定点的文本。有关此内容的更多信息，请参阅以下主题:
关于javascript - 如何在 Shield UI JavaScript 折线图中添加自定义标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31018762/