亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

餅圖.js-顯示無數據保留消息

餅圖.js-顯示無數據保留消息

慕絲7291255 2021-04-16 18:15:58
我正在使用chart.js版本:2.8.0來顯示條形圖和餅圖。非空的條形圖和餅圖根據需要顯示。但是,當條形圖和餅形圖為空或要顯示零數據時,是否有標準化的選項來顯示“無數據可顯示!”。條形圖和餅形圖的消息都可以顯示,以代替空白數據或零數據。我已經在Google上搜索了插件,并在SO中找到了解決方案,但是我發現的選項根本不起作用,或者不適用于最新版本的chartjs。這是我的空餅圖:new Chart(document.getElementById('pieChartExample01'), {    type: 'pie',    data: {        labels: [            'Views',            'Print Requests',            'PDF Downloads',            'DOCX Downloads',        ],        datasets: [{            backgroundColor: [                'rgba(71, 101, 160, 0.3)',  // #4765a0.                'rgba(0, 0, 0, 0.3)',  // #000000.                'rgba(52, 137, 219, 0.3)',  // #3489db.                'rgba(179, 179, 179, 0.3)',  // #b3b3b3.            ],            hoverBackgroundColor: [                'rgba(71, 101, 160, 0.6)',  // #4765a0.                'rgba(0, 0, 0, 0.6)',  // #000000.                'rgba(52, 137, 219, 0.6)',  // #3489db.                'rgba(179, 179, 179, 0.6)',  // #b3b3b3.            ],            borderWidth: 1,            hoverBorderWidth: 2,            borderColor: [                'rgba(71, 101, 160, 1)',  // #4765a0.                'rgba(0, 0, 0, 1)',  // #000000.                'rgba(52, 137, 219, 1)',  // #3489db.                'rgba(179, 179, 179, 1)',  // #b3b3b3.            ],            borderAlign: 'inner',            data: [0, 0, 0, 0]      }]    },    options: {        title: {          display: false,          text: 'Overall Activity'        }    }});<canvas id="pieChartExample01" width="25" height="25"></canvas><script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>這就是我希望空餅圖顯示為(最好帶有標簽)的內容:
查看完整描述

3 回答

?
狐的傳說

TA貢獻1804條經驗 獲得超3個贊

使用我稍加修改的該插件,該插件檢查每個數據集項是否為零:


<script>

    Chart.plugins.register({

        afterDraw: function(chart) {

            if (chart.data.datasets[0].data.every(item => item === 0)) {

                let ctx = chart.chart.ctx;

                let width = chart.chart.width;

                let height = chart.chart.height;


                chart.clear();

                ctx.save();

                ctx.textAlign = 'center';

                ctx.textBaseline = 'middle';

                ctx.fillText('No data to display', width / 2, height / 2);

                ctx.restore();

            }

        }

    });

</script>

這樣,如果所有數據集項目均為0,它將No data to display代替圖表顯示。


查看完整回答
反對 回復 2021-04-22
  • 3 回答
  • 0 關注
  • 228 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號