热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

在分组堆积的条形图中隐藏空条-chart.js

如何解决《在分组堆积的条形图中隐藏空条-chart.js》经验,求助如何解决?

我正在使用2.5.0版的chart.js,需要知道是否有任何方法可以隐藏成组的堆叠条形图中每个组的空条吗?图表数据集中的某些数据值可以为null。

这是我想要的: 组合图类型(分组和堆叠)

    var optiOns= {
    responsive: true,
    maintainAspectRatio: false,
    tooltips: {
        mode: 'label',
        callbacks: {
            label: function(tooltipItem, data) {
                var dataset = data.datasets[tooltipItem.datasetIndex];

                if (tooltipItem.index == 0 && tooltipItem.datasetIndex !== 0)
                    return null;

                return dataset.label + ': ' + numeral(dataset.data[tooltipItem.index]).format('($ 0.0 a)');
            }
        }
    },
    scales: {
        xAxes: [{
            display: true,
            gridLines: {
                display: true
            },
            labels: {
                show: true
            }
        }],
        yAxes: [{
            type: "linear",
            display: true,
            position: "left",
            id: "y-axis-1",
            gridLines: {
                display: false
            },
            labels: {
                show: false
            }
        }, {
            type: "linear",
            display: true,
            gridLines: {
                display: true
            },
            labels: {
                show: true
            },
            ticks: {
                beginAtZero: false,
                userCallback: function(value) {
                    return numeral(value).format('($ 0.0 a)');
                }
            }
        }, {
            type: "linear",
            display: false,
            gridLines: {
                display: false
            },
            labels: {
                show: true
            }
        }, {
            type: "linear",
            display: false,
            gridLines: {
                display: false
            },
            labels: {
                show: true
            }
        }, {
            type: "linear",
            display: false,
            gridLines: {
                display: false
            },
            labels: {
                show: true
            }
        }, {
            type: "linear",
            display: false,
            id: "y-axis-5",
            gridLines: {
                display: false
            },
            labels: {
                show: true
            }
        }]
    },
    legend: {
        labels: {
            fontSize: 11,
            usePointStyle: true,
            padding: 15,
            filter: (legendItem, chartData) => {
                if (legendItem.datasetIndex > 0) return true;
            }
        }
    }
}
var data = {
    labels: ["Opening Balance", "Qtr-1", "Qtr-2", "Qtr-3", "Qtr-4"],
    datasets: [{
        type: 'bar',
        label: "Opening Balance",
        data: [1120000],
        fill: true,
        backgroundColor: 'rgba(243, 194, 0, .3)',
        borderWidth: 1,
        borderColor: '#F3C200',
        hoverBackgroundColor: '#F3C200',
        hoverBorderColor: '#7d6505',
        stack: 'OB'
    }, {
        type: 'bar',
        label: "Income",
        data: [, 210000, 258900, 475669, 402569],
        fill: true,
        backgroundColor: 'rgba(42, 180, 192, .3)',
        borderWidth: 1,
        borderColor: '#166269',
        hoverBackgroundColor: '#2ab4c0',
        hoverBorderColor: '#2ab4c0',
        stack: 'Income'
    }, {
        type: 'bar',
        label: "Income Expected",
        data: [, 215000, 320000, 412236, 385569],
        fill: true,
        backgroundColor: 'rgba(76, 135, 185, .4)',
        borderWidth: 1,
        borderColor: '#2a587f',
        hoverBackgroundColor: '#4c87b9',
        hoverBorderColor: '#2a587f',
        stack: 'Income'
    }, {
        type: 'bar',
        label: "Expenditures",
        data: [, 204560, 256987, 236981, 365587],
        fill: true,
        backgroundColor: 'rgba(243, 82, 58, .3)',
        borderWidth: 1,
        borderColor: '#f3523a',
        hoverBackgroundColor: '#f56954',
        hoverBorderColor: '#f3523a',
        stack: 'Expenditures'
    }, {
        type: 'bar',
        label: "Expenditures Expected",
        data: [, 269877, 325698, 435887, 423369],
        fill: true,
        backgroundColor: 'rgba(228, 58, 69, .4)',
        borderWidth: 1,
        borderColor: '#b32a33',
        hoverBackgroundColor: '#e43a45',
        hoverBorderColor: '#b32a33',
        stack: 'Expenditures'
    }, {
        label: "Balance",
        type: 'bar',
        data: [, 54400, 19013, 14569, 24998],
        fill: true,
        borderColor: '#1ebfae',
        backgroundColor: 'rgba(30, 191, 174, .3)',
        borderWidth: 1,
        hoverBackgroundColor: '#1ebfae',
        hoverBorderColor: '#099486',
        stack: 'Balance'
    }]
};

new Chart(document.getElementById("fundStatus").getContext('2d'), {
    type: 'bar',
    data: data,
    options: options
});

小提琴:https : //jsfiddle.net/q_sabawoon/atLxLg7x/

请帮忙。


推荐阅读
  • Highcharts翻译系列之二十:曲线图例子(二)
    Highcharts翻译系列之二十:曲线图例子(二)代码 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 网址:https:vue.docschina.orgv2guideforms.html表单input绑定基础用法可以通过使用v-model指令,在 ... [详细]
  • fileuploadJS@sectionscripts{<scriptsrc~Contentjsfileuploadvendorjquery.ui.widget.js ... [详细]
  • 在分页时,我想让点过的页码变色.应该怎么做?比如:12345我点2跳到第2页然后2变成红色其他为蓝色 ... [详细]
  • Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例,以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法,以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • 拥抱Android Design Support Library新变化(导航视图、悬浮ActionBar)
    转载请注明明桑AndroidAndroid5.0Loollipop作为Android最重要的版本之一,为我们带来了全新的界面风格和设计语言。看起来很受欢迎࿰ ... [详细]
  • 不同优化算法的比较分析及实验验证
    本文介绍了神经网络优化中常用的优化方法,包括学习率调整和梯度估计修正,并通过实验验证了不同优化算法的效果。实验结果表明,Adam算法在综合考虑学习率调整和梯度估计修正方面表现较好。该研究对于优化神经网络的训练过程具有指导意义。 ... [详细]
  • 本文介绍了机器学习手册中关于日期和时区操作的重要性以及其在实际应用中的作用。文章以一个故事为背景,描述了学童们面对老先生的教导时的反应,以及上官如在这个过程中的表现。同时,文章也提到了顾慎为对上官如的恨意以及他们之间的矛盾源于早年的结局。最后,文章强调了日期和时区操作在机器学习中的重要性,并指出了其在实际应用中的作用和意义。 ... [详细]
  • [echarts] 同指标对比柱状图相关的知识介绍及应用示例
    本文由编程笔记小编为大家整理,主要介绍了echarts同指标对比柱状图相关的知识,包括对比课程通过率最高的8个课程和最低的8个课程以及全校的平均通过率。文章提供了一个应用示例,展示了如何使用echarts制作同指标对比柱状图,并对代码进行了详细解释和说明。该示例可以帮助读者更好地理解和应用echarts。 ... [详细]
  • 引号快捷键_首选项和设置——自定义快捷键
    3.3自定义快捷键(CustomizingHotkeys)ChemDraw快捷键由一个XML文件定义,我们可以根据自己的需要, ... [详细]
  • 025_JavaScript数组方法
    1.把数组转换为字符串1.1.toString()方法1.1.1.toString()方法把数组转换为数组值(逗号分隔)的字符串,并返回结果。1.1.2.语法arrayOb ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了css回到顶部按钮相关的知识,希望对你有一定的参考价值。 ... [详细]
  • <!DOCTYPEhtml><htmllang=en><head><metacharset=UT ... [详细]
  • 基于jquery实现简单的分页控件_jquery
    前台分页控件有很多,这里分享我的分页控件pagination.js1.0版本,该控件基于jquery。先来看一下预览效果: ... [详细]
author-avatar
木棉
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有