1
我想繪製垂直線,但是直到現在都沒有顯示。只顯示舊的水平條形圖。我使用的Chart.js註釋插件,仍然沒有出現,並沒有顯示在控制檯中的錯誤。我在某種程度上遵循這個Jsfiddle example,但不完全是這個,但如果在這個我可以在點2.0上產生垂直線?在水平欄上畫出垂直線條值爲2.0
var ctxViolations = document.getElementById("myChartViolations");
var options = {
scaleLabel: function(object) {
return " " + object.value;
},
responsive: true,
pointDot: false
};
var myChartViolations = new Chart(ctxViolations, {
type: 'horizontalBar',
data: {
labels: violations_labels,
datasets: [{
label: '# of Violations',
showTooltip: true,
data: violations_count_values,
backgroundColor: '#ccccff',
borderColor: '#000000',
borderWidth: 0,
fill: false
},
{
type: 'line',
label: 'Excessive Violations > 3',
backgroundColor: '#ff0000',
borderColor: '#ff0000',
borderWidth: 0,
pointStyle: 'line',
data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3]
}
]
},
options: {
responsive: true,
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: true,
// labelString: 'Violation Type'
},
ticks: {
beginAtZero: true,
fixedStepSize: 1
}
}],
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Violation Count'
},
ticks: {
autoSkip: false,
},
position: 'bottom'
}]
},
hover: {
mode: 'dataset'
},
title: {
display: true,
text: $scope.EstablishmentName.substring(0, 25) + ' Violations'
},
annotation: {
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: 2,
borderColor: 'green',
borderWidth: 3
}]
},
tooltips: {
mode: 'label'
}
}
});
});
}
要加上3.0
@ℊααnd我分享了一張圖片。我想要一個垂直線在點2.0。 (簡而言之,在藍條的結尾處,但條會動態增加,我想要一條2.0的固定線)。 – ephemeral
你能提供'violation_count_values'和'violations_labels'的值嗎?我試圖重現該錯誤,但該行在那裏(https://jsfiddle.net/g0v2wap5/)。只改變你發佈的代碼是這兩個變量的隨機數據,並將'annotations'上的'value'屬性改爲3. –
@RaquelGuimarãescan you post this as a answer? :) – ephemeral