我有一个设计要求,要显示带有5个趋势数据数据集的折线图。沿笔划线的每个数据值都需要在其各自的数据点处显示一个数据值标签。
不幸的是,我在Charts.js中找不到可以满足此要求的选项。
有没有可以帮助我的解决方法?
我也把这个贴在小提琴上:http : //jsfiddle.net/s9eannLh/
非常感谢!
var data = {
labels: ["","Jun 2013","Jul 2013","Aug 2013","Sep 2013","Oct 2013","Nov 2013","Dec 2013","Jan 2014","Feb 2014","Mar 2014","Apr 2014","May 2014"],
datasets: [
{
label: "hemoglobin_1",
title: "test",
fillColor: "transparent",
strokeColor: "#65204c",
pointColor: "#65204c",
pointHighlightStroke: "#FFF",
data: [null,5.7,5.7,5.8,5.7,5.8,5.7,5.9,6.7,6.7,6.5,6.4,6.4]
},
{
label: "hemoglobin_2",
fillColor: "transparent",
strokeColor: "#ed7141",
pointColor: "#ed7141",
pointHighlightStroke: "#FFF",
data: [null,15.5,15.5,15.6,15.2,15.6,15.1,15.8,17,17.4,16.8,16.4,16.4]
},
{
label: "hemoglobin_3",
fillColor: "transparent",
strokeColor: "#de4760",
pointColor: "#de4760",
pointHighlightStroke: "#FFF",
data: [null,37.1,37,37.2,37.6,36.9,37.6,36.8,37.6,38,37.5,39.1,37.5]
},
{
label: "hemoglobin_4",
fillColor: "transparent",
strokeColor: "#fdcf7e",
pointColor: "#fdcf7e",
pointHighlightStroke: "#FFF",
data: [null,29.9,30.4,29.5,29.6,30.2,29.4,29.8,26.9,27,28.5,26.8,28.5]
},
{
label: "hemoglobin_5",
fillColor: "transparent",
strokeColor: "#a33a59",
pointColor: "#a33a59",
pointHighlightStroke: "#FFF",
data: [null,11.8,11.4,11.9,11.9,11.5,12.2,11.7,11.8,10.9,10.7,11.3,11.3]
}
]
};
var options = {
responsive: true,
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 5,
scaleStartValue: 0,
showTooltips: false,
pointDot: true,
pointDotRadius : 6,
datasetStrokeWidth : 3,
bezierCurve : false,
scaleShowHorizontalLines: false,
scaleGridLineWidth : 2,
scaleGridLineColor : "#EEEEEE",
scaleLineWidth: 3,
scaleLineColor: "#000000",
scaleFontFamily: '"Gotham Book",sans-serif',
scaleFontSize: 18
}
var ctx = $("#myChart").get(0).getContext("2d");
var Trends = new Chart(ctx).Line(data, options);
我终于找到了解决这个问题的方法。
我意识到我可以访问DOM中的图表对象:
Trends.datasets
在这五个数据集中,每个数据集中都有一个包含x和y位置的点对象:
Trends.datasets[0..4].points
因此,我利用Chart.js中的全局配置函数通过回调解析了这些要点:
// Function - Will fire on animation progression.
onAnimationProgress: function(){},
// Function - Will fire on animation completion.
onAnimationComplete: function(){}
我发现我必须使用onAnimationComplete
with,responsive: true
因为在调整大小事件中点标签会被清除掉。
在回调中找到要点后,我只需在画布上写下想要的标签即可。
我对代码的补充是:
var options = {
onAnimationProgress: function() { drawDatasetPointsLabels() },
onAnimationComplete: function() { drawDatasetPointsLabels() }
}
随着增加的功能:
function drawDatasetPointsLabels() {
ctx.font = '.9rem "Gotham Book",sans-serif';
ctx.fillStyle = '#AAA';
ctx.textAlign="center";
$(Trends.datasets).each(function(idx,dataset){
$(dataset.points).each(function(pdx,pointinfo){
// First dataset is shifted off the scale line.
// Don't write to the canvas for the null placeholder.
if ( pointinfo.value !== null ) {
ctx.fillText(pointinfo.value,pointinfo.x,pointinfo.y - 15);
}
});
});
}
因此,这里是整个代码源以及提供解决方案的新代码:
var data = {
labels: ["","Jun 2013","Jul 2013","Aug 2013","Sep 2013","Oct 2013","Nov 2013","Dec 2013","Jan 2014","Feb 2014","Mar 2014","Apr 2014","May 2014"],
datasets: [
{
label: "hemoglobin_1",
fillColor: "transparent",
strokeColor: "#65204c",
pointColor: "#65204c",
pointHighlightStroke: "#FFF",
data: [null,5.7,5.7,5.8,5.7,5.8,5.7,5.9,6.7,6.7,6.5,6.4,6.4]
},
{
label: "hemoglobin_2",
fillColor: "transparent",
strokeColor: "#ed7141",
pointColor: "#ed7141",
pointHighlightStroke: "#FFF",
data: [null,15.5,15.5,15.6,15.2,15.6,15.1,15.8,17,17.4,16.8,16.4,16.4]
},
{
label: "hemoglobin_3",
fillColor: "transparent",
strokeColor: "#de4760",
pointColor: "#de4760",
pointHighlightStroke: "#FFF",
data: [null,37.1,37,37.2,37.6,36.9,37.6,36.8,37.6,38,37.5,39.1,37.5]
},
{
label: "hemoglobin_4",
fillColor: "transparent",
strokeColor: "#fdcf7e",
pointColor: "#fdcf7e",
pointHighlightStroke: "#FFF",
data: [null,29.9,30.4,29.5,29.6,30.2,29.4,29.8,26.9,27,28.5,26.8,28.5]
},
{
label: "hemoglobin_5",
fillColor: "transparent",
strokeColor: "#a33a59",
pointColor: "#a33a59",
pointHighlightStroke: "#FFF",
data: [null,11.8,11.4,11.9,11.9,11.5,12.2,11.7,11.8,10.9,10.7,11.3,11.3]
}
]
};
var options = {
responsive: true,
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 5,
scaleStartValue: 0,
showTooltips: false,
pointDot: true,
pointDotRadius : 6,
datasetStrokeWidth : 3,
bezierCurve : false,
scaleShowHorizontalLines: false,
scaleGridLineWidth : 2,
scaleGridLineColor : "#EEEEEE",
scaleLineWidth: 3,
scaleLineColor: "#000000",
scaleFontFamily: '"Gotham Book",sans-serif',
scaleFontSize: 18,
onAnimationProgress: function() { drawDatasetPointsLabels() },
onAnimationComplete: function() { drawDatasetPointsLabels() }
}
var ctx = $("#myChart").get(0).getContext("2d");
var Trends = new Chart(ctx).Line(data, options);
function drawDatasetPointsLabels() {
ctx.font = '.9rem "Gotham Book",sans-serif';
ctx.fillStyle = '#AAA';
ctx.textAlign="center";
$(Trends.datasets).each(function(idx,dataset){
// First dataset is shifted off the scale line.
// Don't write to the canvas for the null placeholder.
$(dataset.points).each(function(pdx,pointinfo){
if ( pointinfo.value !== null ) {
ctx.fillText(pointinfo.value,pointinfo.x,pointinfo.y - 15);
}
});
});
}
这是jsfiddle上的原始有问题的版本:http : //jsfiddle.net/s9eannLh
[更新的链接]这是jsfiddle的更新解决方案:https ://jsfiddle.net/s9eannLh/82/
谢谢大家!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句