我有一个图表,我几乎看不到"活动"列,我想知道是否可以为某个数据集定义默认的Y轴?

我想改进图表的可见性/用户界面.对如何做这件事有什么建议吗?

下面的例子也可以在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,
    }
},
});
<body>
  <canvas id="my-chart"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

推荐答案

您可以在每个轴y上放置一个id,称为yAxisID,以根据需要消除刻度的歧义.试试这个代码:

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],
            yAxisID: "yActvity"
        },
        {
            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]
        },
    ]
},
scales: {
  yActvity: {
    min: 0,
    max: 40,
  }
},
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,
    }
},
});
<body>
  <canvas id="my-chart"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

Javascript相关问答推荐

每次子路由重定向都会调用父加载器函数

在页面上滚动 timeshift 动垂直滚动条

从WooCommerce Checkout Country字段重新排序国家,保持国家同步

如何修复(或忽略)HTML模板中的TypeScript错误?'

Angular 17—每当一个布尔变量变为真时触发循环轮询,只要它保持为真

google docs boldText直到按行执行应用脚本错误

在forEach循环中获取目标而不是父对象的属性

在数组中查找重叠对象并仅返回那些重叠对象

使用auth.js保护API路由的Next.JS,FETCH()不起作用

当我try 将值更改为True时,按钮不会锁定

令牌JWT未过期

删除元素属性或样式属性的首选方法

我想使用GAS和HTML将从Electron 表格中获得的信息插入到文本字段的初始值中

使用自动识别发出信号(&Q)

基于产品ID更新条带产品图像的JavaScript命中错误

我正在试着做一个TicTacToe Ai来和我玩.但是,我试着在第一个方块被点击时出现一个X,然后在第二个方块之后出现一个O

为什么NULL不能在构造函数的.Prototype中工作

如何在每隔2分钟刷新OKTA令牌后停止页面刷新

TabNavigator和StackNavigator之间的Reaction Native中的导航问题

使用Library chart.js在一个带有两个y轴的图表中绘制两个数据集