javascript - chart.js 折线图不显示超过图表中某个点的线
问题描述
出于某种原因,我的折线图没有正确显示超过数据集中某个点的线条,我无法弄清楚为什么会出现这种情况。
我有另一个图表,它加载基本相同的数据集,并且显示得很好(唯一的区别是折线图具有填充、边框颜色和张力属性)。
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script>
const data_bar_chart = {
labels: {{ labels | safe }},
datasets: {{ data_list | safe}}
};
const config_bar_chart = {
type: 'bar',
data: data_bar_chart,
options: {
plugins: {
title: {
display: true,
text: 'Bar Chart - Stacked'
},
},
legend: {
position: "top",
align: "start"
},
responsive: false,
scales: {
xAxes: [{
stacked: true,
ticks: {
padding: 20
}
}],
yAxes: [{
stacked: true,
}],
},
}
};
const data_line_chart = {
labels: {{ labels | safe }},
datasets: {{ data_list_line_chart | safe}}
};
const config_line_chart = {
type: 'line',
data: data_line_chart,
options: {
plugins: {
title: {
display: true,
text: 'Line Chart'
},
},
legend: {
position: "top",
align: "start"
},
responsive: false,
scales: {
xAxes: [{
ticks: {
padding: 20
}
}],
},
}
};
window.onload = function() {
var ctx_bar_chart = document.getElementById('bar-chart-stacked').getContext('2d');
window.myPie = new Chart(ctx_bar_chart, config_bar_chart);
var ctx_line_chart = document.getElementById('line-chart').getContext('2d');
window.myPie = new Chart(ctx_line_chart, config_line_chart);
};
</script>
.chartWrapper {
position: relative;
}
.chartWrapper > canvas {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.chartAreaWrapper {
width: 1000px;
overflow-x: scroll;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project Scanner</title>
<meta name="description" content="Project Scanner">
<link rel="stylesheet" href="{% static 'css/chart.css' %}">
</head>
<body>
<div class="chartWrapper">
<div class="chartAreaWrapper">
<canvas id="bar-chart-stacked" height="400" width="25000"></canvas>
</div>
</div>
<div class="chartWrapper">
<div class="chartAreaWrapper">
<canvas id="line-chart" height="400" width="25000"></canvas>
</div>
</div>
</body>
</html>
我使用 Django 作为框架并通过我的模板传递解析的数据集。
先感谢您!
解决方案
将这两行代码添加到脚本中为我解决了这个问题:
Chart.helpers.canvas.clipArea = function() {};
Chart.helpers.canvas.unclipArea = function() {};
推荐阅读
- r - 安装 R 包“ld:警告:找不到选项的目录”时出现问题
- .net-core - VS 2019 C# 控制台 netcore 3 应用程序未调试
- google-cloud-platform - 使所有域的名称服务器回复相同
- excel - 如果文件夹名称相同,则替换文件夹
- ruby-on-rails - 音频不适用于heroku上的rails应用程序
- sql - SQL 可行性:可以按值挤出行并以自定义方式组合表吗?
- javascript - 在输入中格式化数字(掩码)
- python - 在 Python 中从字符串中去除非字母字符的代码
- flutter - 如何重建提供者选择器但不重建它们的孩子
- jenkins - 依赖于 Jenkins 构建布尔参数的表达式在管道中不起作用