ChartJS定义默认Y轴数据集

ni65a41a  于 2024-01-07  发布在  Chart.js
关注(0)|答案(2)|浏览(168)

我有一个图表,我几乎看不到«活动»列,我想知道我是否可以定义默认的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,
    }
},
});

个字符

6tqwzwtp

6tqwzwtp1#

你可以在每个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,
    }
},
});

个字符

imzjd6km

imzjd6km2#

您可以添加options.scales.y.ticks.callback,它是一个接受y中的值并返回新标签的函数。
下一个示例显示回调为options.scales.y.ticks.callback =(value)=>(value / 1000)+ 'K'

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
                },
            }
        ],
        y: {
          ticks: {
            callback: (value) => (value / 1000) + 'K'
          }
        },
        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,
    }
},
});

个字符

相关问题