我有一个图表,我几乎看不到«活动»列,我想知道我是否可以定义默认的Y轴到某个数据集?
我想改善图表的可见性/ UI。有什么建议吗?
下面的例子也可以在JSFiddle中看到。
const ctx = document.getElementById('my-chart').getContext('2d');
new Chart(ctx,
{
type: 'bar',
data:
{
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets:
[
{
label: 'Activities',
backgroundColor: '#000',
data: [5, 33, 24, 6, 14, 5, 8, 10, 5, 4, 0, 0],
},
{
label: 'Grand total',
backgroundColor: '#eb4034',
data: [0, 300.96, 482.98, 153.75, 463.71, 70.36, 3025.80, 1142.00, 2266.89, 1660.50, 0, 0],
},
]
},
options:
{
responsive: true,
maintainAspectRatio: false,
elements:
{
line:
{
tension: 0.4,
borderJoinStyle: 'round',
}
},
tooltips:
{
mode: 'index',
intersect: false,
},
hover:
{
mode: 'nearest',
intersect: true
},
scales:
{
xAxes:
[
{
gridLines:
{
display: false
},
}
],
yAxes:
[
{
gridLines:
{
display: true,
color: '#d9dffa',
drawBorder: false,
offsetGridLines: false,
drawTicks: false,
borderDash: [3,5],
zeroLineWidth: 1,
zeroLineColor: '#d9dffa',
zeroLineBorderDash: [3,4]
}
}
]
},
legend:
{
display: false,
}
},
});
个字符
2条答案
按热度按时间6tqwzwtp1#
你可以在每个y轴上放置一个id,称为yAxisID,来随意消除刻度的歧义。试试下面的代码:
个字符
imzjd6km2#
您可以添加options.scales.y.ticks.callback,它是一个接受y中的值并返回新标签的函数。
下一个示例显示回调为options.scales.y.ticks.callback =(value)=>(value / 1000)+ 'K'
个字符