[英]How to access all data in a function with ChartJs?
考慮以下代碼。
var chartData = { labels: ["January", "February", "March", "April", "May", "June"], datasets: [{ fillColor: "#79D1CF", strokeColor: "#79D1CF", data: [60, 80, 81, 56, 55, 40] }] }; var ctx = document.getElementById("myChart1").getContext("2d"); var myLine = new Chart(ctx, { type: "line", data: chartData, showTooltips: false, onAnimationComplete: function() { var ctx = this.chart.ctx; ctx.font = this.scale.font; ctx.fillStyle = this.scale.textColor ctx.textAlign = "center"; ctx.textBaseline = "bottom"; this.datasets.forEach(function(dataset) { dataset.points.forEach(function(points) { ctx.fillText(points.value, points.x, points.y - 10); }); }) } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script> <canvas id="myChart1" height="300" width="500"></canvas>
因為我在不同的圖表中使用onAnimationComplete
中的函數,所以我喜歡創建一個 JavaScript 文件,在其中收集所有函數並使用它們。 例如
var chart = new Chart(ctx, eval(config));
chart.options.animation.onComplete = function () {
window["AnimationComplete1"](chart);
}
function AnimationComplete1(chart) {
var ctx = chart.ctx;
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
chart.data.datasets.forEach(function (dataset) {
dataset.points.forEach(function (points) {
ctx.fillText(points.value, points.x, points.y - 10);
});
})
}
在這段代碼中,問題是在函數中我無法訪問來自chart.data.datasets
的dataset
的point
。 另外,我無法訪問font
和textColor
的scale
。
有沒有辦法從一個通用函數中訪問這些值?
Chart.js
動畫onComplete
回調函數必須在圖表options
中定義。
options: {
animation: {
onComplete: ctx => {
// do your stuff
}
}
}
請在下面查看您修改后的代碼,看看它是如何工作的。
var chartData = { labels: ["January", "February", "March", "April", "May", "June"], datasets: [{ fillColor: "#79D1CF", strokeColor: "#79D1CF", data: [60, 80, 81, 56, 55, 40] }] }; new Chart('myChart1', { type: "line", data: chartData, options: { animation: { onComplete: ctx => { console.log(ctx.chart.data.datasets); console.log(ctx.chart.options.scales.x); } } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script> <canvas id="myChart1" height="300" width="500"></canvas>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.