图表Js线定位
问题描述 投票：0回答：1
下面是图表代码。条已分组，但线条定位不正确。
new Chart(ctx, {
grouped: true,
data: {
labels: this.shortenMonths,
datasets: [
{
label: 'age',
data: ageArray,
backgroundColor: gradient,
borderWidth: 2,
pointRadius: 0,
tension: 0,
fill: true,
type: "line",
order: 2,
},
{
label: 'users',
data: arrayOfUsers,
backgroundColor: "#fc9a00",
order: 0,
type: "bar",
},
{
label: 'more users',
data: moreUsers,
backgroundColor: "#4fa1ee",
order: 1,
type: "bar",
},
],
},
图表选项
options: {
clip: false,
responsive: true,
interaction: {
intersect: false,
mode: "index",
},
maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false,
drawTicks: false,
},
border: {
display: false,
dash: [2, 4],
},
ticks: {
padding: 1,
beginAtZero: true,
min: 0,
},
offset: true,
},
y: {
offset: false,
border: {
display: false,
dash: [2, 4],
},
grid: {
drawTicks: false,
color: "#eaecef",
lineWidth: 2,
},
ticks: {
padding: 1,
stepSize: 250,
beginAtZero: true,
min: 0,
},
},
},
plugins: {
legend: {
position: "bottom",
labels: {
usePointStyle: true,
padding: 24,
},
},
},
},
绿线没有向任何一侧延伸。 我希望绿线从橙色条之前和蓝色条之后开始。
我尝试添加一个可以定位 x 轴的插件，但没有成功。 任何帮助都会很棒！
1个回答
0
投票
投票
这些点的位置与折线图中一样，因为折线图的points数量等于条形图的intervals数量，因此每个点应放置在间隔的中心，这意味着第一个和最后一个间隔为半间隔。
如果您想扩展折线图以覆盖整个x空间，有简单的技术解决方案。例如，为直线添加辅助 x 轴。
但是，仍然存在根本问题：如果有
NNNN N-1 间隔）。因此，您必须从（至少）两个不完美的解决方案中进行选择来覆盖缺失的区间：
- 仅移动第一个和最后一个点，每个点移动一半间隔以覆盖缺失的间隔或
- 按比例移动所有点，这意味着没有点离其正确位置很远，但大多数点都稍微偏离中心。
在下面的实现中，有两种情况，突出显示的点以便人们可以看到每种情况下发生的情况。区别仅在于为该行生成
data第一个变体：
const ageArray = Array.from({length: 12}, (_, i)=>20+(i+1)/100), // + (i+1)/100 to make sure which point gets in which month
arrayOfUsers = Array.from({length: 12}, ()=>Math.ceil(7+8*Math.random())),
moreUsers = Array.from({length: 12}, ()=>Math.ceil(5+10*Math.random()));
new Chart('chart1', {
grouped: true,
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: 'age',
data: ageArray.map((age, i) => ({x: i===0 ? i : i === ageArray.length-1 ? i+1 : i+0.5, y: age})),
xAxisID: 'x1',
backgroundColor: 'rgba(33, 221, 33, 0.3)',
borderWidth: 2,
pointRadius: 0,
tension: 0,
fill: true,
pointRadius: 4,
type: "line",
order: 2,
},
{
label: 'users',
data: arrayOfUsers,
backgroundColor: "#fc9a00",
order: 0,
type: "bar",
},
{
label: 'more users',
data: moreUsers,
backgroundColor: "#4fa1ee",
order: 1,
type: "bar",
},
],
},
options: {
clip: false,
responsive: true,
interaction: {
intersect: false,
mode: "index",
},
maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false,
drawTicks: false,
},
border: {
display: false,
dash: [2, 4],
},
ticks: {
padding: 1,
beginAtZero: true,
min: 0,
},
offset: true,
},
x1: {
type: 'linear',
display: false
},
y: {
offset: false,
border: {
display: false,
dash: [2, 4],
},
grid: {
drawTicks: false,
color: "#eaecef",
lineWidth: 2,
},
ticks: {
padding: 1,
stepSize: 250,
beginAtZero: true,
min: 0,
},
},
},
plugins: {
legend: {
position: "bottom",
labels: {
usePointStyle: true,
padding: 24,
},
},
},
},
});<div style="height:500px">
<canvas id="chart1"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.umd.js" integrity="sha512-CMF3tQtjOoOJoOKlsS7/2loJlkyctwzSoDK/S40iAB+MqWSaf50uObGQSk5Ny/gfRhRCjNLvoxuCvdnERU4WGg==" crossOrigin="anonymous" referrerpolicy="no-referrer"></script>第二个：
const ageArray = Array.from({length: 12}, (_, i)=>20+(i+1)/100), // + (i+1)/100 to make sure which point gets in which month
arrayOfUsers = Array.from({length: 12}, ()=>Math.ceil(7+8*Math.random())),
moreUsers = Array.from({length: 12}, ()=>Math.ceil(5+10*Math.random()));
new Chart('chart1', {
grouped: true,
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: 'age',
data: ageArray.map((age, i) => ({x: i * ageArray.length/(ageArray.length-1) , y: age})),
xAxisID: 'x1',
backgroundColor: 'rgba(33, 221, 33, 0.3)',
borderWidth: 2,
pointRadius: 0,
tension: 0,
fill: true,
pointRadius: 4,
type: "line",
order: 2,
},
{
label: 'users',
data: arrayOfUsers,
backgroundColor: "#fc9a00",
order: 0,
type: "bar",
},
{
label: 'more users',
data: moreUsers,
backgroundColor: "#4fa1ee",
order: 1,
type: "bar",
},
],
},
options: {
clip: false,
responsive: true,
interaction: {
intersect: false,
mode: "index",
},
maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false,
drawTicks: false,
},
border: {
display: false,
dash: [2, 4],
},
ticks: {
padding: 1,
beginAtZero: true,
min: 0,
},
offset: true,
},
x1: {
type: 'linear',
display: false
},
y: {
offset: false,
border: {
display: false,
dash: [2, 4],
},
grid: {
drawTicks: false,
color: "#eaecef",
lineWidth: 2,
},
ticks: {
padding: 1,
stepSize: 250,
beginAtZero: true,
min: 0,
},
},
},
plugins: {
legend: {
position: "bottom",
labels: {
usePointStyle: true,
padding: 24,
},
},
},
},
});<div style="height:500px">
<canvas id="chart1"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.umd.js"
integrity="sha512-CMF3tQtjOoOJoOKlsS7/2loJlkyctwzSoDK/S40iAB+MqWSaf50uObGQSk5Ny/gfRhRCjNLvoxuCvdnERU4WGg=="
crossOrigin="anonymous" referrerpolicy="no-referrer"></script>最新问题
- “代码移至数据”而不是数据移至代码的原理是什么？
- 如何在React Native中实现这个底部栏
- TCP PSH 如何工作？
- Git - 如何合并分支，但忽略其中一个更改
- 如果Python中的数字是实数，如何不显示虚部（0j）？
- 使用不安全代码将 bytes::BytesMut 转换为 bytes::Bytes，而不使用 freeze
- axis = 0 似乎在 sum() 和 dropna() 中表现不同
- 在浏览器播放视频时，你能解释一下 requestVideoFrameCallback 事件的用途吗
- 用于在 Markdown 中高亮显示 Solidity 语法的 VSCode 插件？
- 如何在准备好Excel文件后立即将其上传到Azure Blob存储而不保存在本地？
- Minecraft Spigot 插件未运行
- Flutter 应用无法在 Android 模拟器上运行，但可以在 iOS 模拟器上运行
- 是否可以在 MediatR 中为多个通知编写一个处理程序
- “skb->protocol”应该设置成什么？
- 如何在 html 中获取多次出现，查找部分
- 无法解析polars_core，arrow::legacy，Dataframe是polars-lazy =“0.44.2”
- Django - 使用 get_FOO_display 进行聚合
- 在 Nginx 和 Passenger 中提供预压缩的缓存文件
- 边缘未出现在@xyflow//react（React Flow）中
- CSS 代码荧光笔 - 预代码标签中的边距
© www.soinside.com 2019 - 2024. All rights reserved.