微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在chart.js中选择一个数据集后,显示/隐藏其他y轴比例| chart.js事件

如何解决在chart.js中选择一个数据集后,显示/隐藏其他y轴比例| chart.js事件

我拥有两个不同资源(销售和费用)的数据,并且在同一张图表上显示用户可以选择任何数据集,什么都不选择,或者全部都不选择。

问题:-:当用户取消选择任一数据集时,y轴比例值已更改(范围0-1,未选择),但我想隐藏所有其他y选择任一数据集后,-轴缩放。我还想仅显示一个y轴比例,但基于显示的数据。并且y轴刻度应在更改(选择或取消选择数据集)的情况下自动更新

这是我的chart.js

let months = ["January","February","march","April","May","June","July","August","September","October","November","December"];

let salesExpensesChartEle = $("#sales-expenses-chart");

if (salesExpensesChartEle) {

    let salesData = {
        label: 'Sales',data: [10,19,3,15,7,13],backgroundColor: 'rgba(37,106,206,1)',borderWidth: 0,yAxisID: "y-axis-sales",poinTradius: 0,};

    let expensesData = {
        label: 'Expenses',data: [12,5,6,3],backgroundColor: 'rgba(175,27,16,yAxisID: "y-axis-expenses",};

    let salesExpensesChartData = {
        labels: months,datasets: [salesData,expensesData]
    };

    let chartOptions = {
        responsive: true,elements: {
            point:{
                radius: 0
            },line :{
                fill: false
            }
        },title: {
            display: true,position: 'bottom',text: 'SALES / EXPENSES',fontSize: 14
        },scales: {
            xAxes: [{
                display: true,barPercentage: 1,categoryPercentage: 0.6,gridLines: {
                    display: false
                }
            }],yAxes: [{
                display: true,type: "linear",id: "y-axis-sales",gridLines: {
                    display: false
                },ticks: {
                    beginAtZero:false,stepSize: 2
                },/*scaleLabel: {
                    display: true,labelString: 'USD',beginAtZero: true,},*/
            },{
                id: "y-axis-expenses",stepSize: 2,/*max: 50,min: 0*/
                }
            }]
        }
    };

    let salesExpensesChart = new Chart(salesExpensesChartEle,{
        type: 'bar',data: salesExpensesChartData,options: chartOptions
    });
} 

如您在屏幕快照中看到的,其中显示了两个y轴刻度。

chart init

当我取消选中销售数据时,我想隐藏销售数据的y轴(从0到1以及费用y轴显示),反之亦然。

sales unchecked

expenses unchecked

现在都选中了

Both unchecked

,当我取消选择两个数据集时,比例值显示如下,但我也希望y轴应该是最后选择的数据集。因此,例如,最初我单击费用数据集,然后y轴比例应该是销售数据集,然后,如果我单击销售数据集(即现在都选择了),则比例应该是上次时间比例价值(即销售规模价值)。

简而言之,

explain using gif

我需要以下内容

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。