首頁猿問如何使餅圖和條形圖未選中的部分變灰？

如何使餅圖和條形圖未選中的部分變灰？

JavaScript

瀟湘沐 2023-03-24 17:14:07

我正在嘗試通過以下示例進行練習：在此處輸入鏈接描述上面的鏈接顯示當我在餅圖中選擇2011年時，其他都是灰色的。但是我的代碼沒有成功。該示例完美運行，如下所示：在此處輸入圖像描述我下面的代碼無法像示例所示那樣使餅圖和條形圖的未選擇部分變灰：<!DOCTYPE html><html><head> <title>dc.js - Removing Empty Bars</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://gist.githubusercontent.com/kevinkraus92/cc5ac08b30c244e54e2c96bbe5fea110/raw/608ea6bc5564c9705a6b3c41281b5dddc84b8879/dc.css"/></head><body><div class="container"><script type="text/javascript" src="https://raw.githubusercontent.com/dc-js/dc.js/develop/web-src/examples/header.js"></script> <p>Example demonstrating using a "<a href="https://github.com/dc-js/dc.js/wiki/FAQ#fake-groups">Fake Group</a>" to remove the empty bars of an ordinal bar chart when their values drop to zero.</p> <p>(Note the use of <code><a href="https://dc-js.github.io/dc.js/docs/html/CoordinateGridMixin.html#elasticX">.elasticX(true)</a></code> to force calculation of the X domain each round.)</p><div id="chart-ring-year"></div><div id="chart-hist-spend"></div><div id="chart-row-spenders"></div><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.1.1/d3.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/4.1.1/dc.js"></script><script type="text/javascript">var yearRingChart = new dc.PieChart("#chart-ring-year"), spendHistChart = new dc.BarChart("#chart-hist-spend"), spenderRowChart = new dc.RowChart("#chart-row-spenders");];// normalize/parse dataspendData.forEach(function(d) { d.Spent = d.Spent.match(/\d+/);});有什么想法嗎？謝謝。

查看完整描述

1 回答

波斯汪

TA貢獻1811條經驗獲得超4個贊

使用 dc.js 的 CSS 可以獲得相同的效果。如果您想為其設置樣式，請使用該 CSS 作為起點。

<!DOCTYPE html>

<html>

<head>

<title>dc.js - Removing Empty Bars</title>

</head>

<body>

<p>Example demonstrating using a "<a href="https://github.com/dc-js/dc.js/wiki/FAQ#fake-groups">Fake Group</a>" to remove

the empty bars of an ordinal bar chart when their values drop to zero.</p>

<p>(Note the use of <code><a href="https://dc-js.github.io/dc.js/docs/html/CoordinateGridMixin.html#elasticX">.elasticX(true)</a></code>

to force calculation of the X domain each round.)</p>

var yearRingChart = new dc.PieChart("#chart-ring-year"),

spendHistChart = new dc.BarChart("#chart-hist-spend"),

spenderRowChart = new dc.RowChart("#chart-row-spenders");

// use static or load via d3.csv("spendData.csv").then(function(spendData) {/* do stuff */});

var spendData = [

{Name: 'Mr A', Spent: '$40', Year: 2011},

{Name: 'Mr B', Spent: '$10', Year: 2011},

{Name: 'Mr C', Spent: '$40', Year: 2011},

{Name: 'Mr A', Spent: '$70', Year: 2012},

{Name: 'Mr B', Spent: '$20', Year: 2012},

{Name: 'Mr B', Spent: '$50', Year: 2013},

{Name: 'Mr C', Spent: '$30', Year: 2013}

];

// normalize/parse data

spendData.forEach(function(d) {

d.Spent = d.Spent.match(/\d+/);

});

function remove_empty_bins(source_group) {

return {

all:function () {

return source_group.all().filter(function(d) {

return d.value != 0;

});

}

};

}

// set crossfilter

var ndx = crossfilter(spendData),

yearDim = ndx.dimension(function(d) {return +d.Year;}),

spendDim = ndx.dimension(function(d) {return Math.floor(d.Spent/10);}),

nameDim = ndx.dimension(function(d) {return d.Name;}),

spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;}),

spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;}),

spendHist = spendDim.group().reduceCount(),

nonEmptyHist = remove_empty_bins(spendHist)

yearRingChart

.width(200).height(200)

.dimension(yearDim)

.group(spendPerYear)

.innerRadius(50);

spendHistChart

.width(300).height(200)

.dimension(spendDim)

.group(nonEmptyHist)

.x(d3.scaleBand())

.xUnits(dc.units.ordinal)

.elasticX(true)

.elasticY(true);

spendHistChart.xAxis().tickFormat(function(d) {return d*10}); // convert back to base unit

spendHistChart.yAxis().ticks(2);

spenderRowChart

.width(350).height(200)

.dimension(nameDim)

.group(spendPerName)

.elasticX(true);

dc.renderAll();

</script>

</div>

</body>

</html>

反對回復 2023-03-24

1 回答
0 關注
87 瀏覽

關注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

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

公眾號

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

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

如何使餅圖和條形圖未選中的部分變灰？

如何使餅圖和條形圖未選中的部分變灰？

1 回答

添加回答

如何使餅圖和條形圖未選中的部分變灰？