मैं एक बार चार्ट बनाना चाहता हूं जो एक चार्ट में एकाधिक रंगों का उपयोग करता है। जैसा कि मैं v4 का उपयोग कर रहा हूं, मैं d3.scaleBand ()। रेंज का उपयोग करना चाह रहा था, हालांकि यह काम नहीं कर रहा है, मेरे पास 7 अलग-अलग बार हैं और मैं सभी को लेबल करना चाहता हूं, लेकिन अंतिम ग्रे में। आखिरी वाला नीला/चैती रंग में होना चाहिए।

यदि style.css के भीतर ऐसा करने का कोई तरीका था, तो यह बहुत अच्छा होगा, लेकिन यदि समाधान केवल main.js के भीतर ही किया जा सकता है, तो यह भी ठीक होगा।

Main.js

var margin = { left:80, right:20, top:50, bottom:100 };

var width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var g = d3.select("#chart-area")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

// Define colour pallet
var color = d3.scaleBand().range(["#aeb3b7", "#aeb3b7", "#aeb3b7", "#aeb3b7",
                "#aeb3b7", "#3a6587", "#3a6587"]);

// X Label
g.append("text")
    .attr("y", height + 50)
    .attr("x", width / 2)
    .attr("font-size", "20px")
    .attr("text-anchor", "middle")
    .attr("fill", "#aeb3b7")  // This changes the Label text attr() or style()
    .text("Month");

// Y Label
g.append("text")
    .attr("y", -60)
    .attr("x", -(height / 2))
    .attr("font-size", "20px")
    .attr("text-anchor", "middle")
    .attr("transform", "rotate(-90)")
    .attr("fill", "#aeb3b7")  // This changes the Label text attr() or style()
    .text("Revenue");

d3.json("data/revenues.json").then(function(data){
    // console.log(data);


    // Clean data
    data.forEach(function(d) {
        d.revenue = +d.revenue;
    });

    // X Scale
    var x = d3.scaleBand()
        .domain(data.map(function(d){ return d.month }))
        .range([0, width])
        .padding(0.2);

    // Y Scale
    var y = d3.scaleLinear()
        .domain([0, d3.max(data, function(d) { return d.revenue })])
        .range([height, 0]);

    // X Axis
    var xAxisCall = d3.axisBottom(x);
    g.append("g")
        .attr("class", "axisEx")
        .attr("transform", "translate(0," + height +")")
        .call(xAxisCall);

    // Y Axis
    var yAxisCall = d3.axisLeft(y)
        .tickFormat(function(d){ return "$" + d; });
    g.append("g")
        .attr("class", "axisWhy")
        .call(yAxisCall);



    // Bars
    var rects = g.selectAll("rect")
        .data(data)

    rects.enter()
        .append("rect")
            .attr("y", function(d){ return y(d.revenue); })
            .attr("x", function(d){ return x(d.month) })
            .attr("height", function(d){ return height - y(d.revenue); })
            .attr("width", x.bandwidth)
            .attr("fill", function(d, i) {
                return color(i);
            })
            //.attr("fill", "#3a6587"); // This changes the column colour to a distinct colour
})

Index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <title>Star Break Coffee</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Custom styling -->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container">
            <a class="navbar-brand" href="#"><img id="logo" src="img/logo.png"></a>      
        </div>
    </nav>

    <!-- Bootstrap grid setup -->
    <div class="container">
        <div class="row">
            <div id="chart-area"></div>
        </div>
    </div>

<!-- External JS libraries -->
<script src="js/d3.min.js"></script>
<!-- Custom JS -->
<script src="js/main.js"></script>

</body>
</html>

स्टाइल.सीएसएस

#chart-area svg {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#logo {
    height:50px;
}

.navbar-brand {
    height: 60px;
    padding: 5px 0px;
}

/*  Line is used to set the vertical 
portion of the graph should be grey 
to improve legibility */

.axisWhy line{
  stroke:  #aeb3b7; 
}

/*  path is used to set the axis ticks 
should be grey to improve legibility */

.axisWhy path{
  stroke: #aeb3b7;
}

/*  path is used to set the axis text 
should be black to contrast grey axis 
text */

.axisWhy text{
  fill: black;
} 


/*  Line is used to set the vertical 
portion of the graph should be grey 
to improve legibility */

.axisEx line{
  stroke:  #aeb3b7; 
}

/*  path is used to set the axis ticks 
should be grey to improve legibility */

.axisEx path{
  stroke: #aeb3b7;
}

/*  path is used to set the axis text 
should be black to contrast grey axis 
text */

.axisEx text{
  fill: black;
} 

/* Can be used to set the fill colour 
for a bar chart, however the colour is
used for all bars 
    rect {
    fill: #3a6587;
}
*/

राजस्व.json

[
    {
        "month": "January",
        "revenue": "13432",
        "profit": "8342"
    },
    {
        "month": "February",
        "revenue": "19342",
        "profit": "10342"
    },
    {
        "month": "March",
        "revenue": "17443",
        "profit": "15423"
    },
    {
        "month": "April",
        "revenue": "26342",
        "profit": "18432"
    },
    {
        "month": "May",
        "revenue": "34213",
        "profit": "29434"
    },
    {
        "month": "June",
        "revenue": "50321",
        "profit": "45343"
    },
    {
        "month": "July",
        "revenue": "54273",
        "profit": "47452"
    }
]

धन्यवाद जोनाथन

0
Jonathan Dunne 2 अक्टूबर 2018, 19:10

1 उत्तर

सबसे बढ़िया उत्तर

जो तुम्हे चाहिए वो है,

var color = ["#aeb3b7", "#aeb3b7", "#aeb3b7", "#aeb3b7",
                    "#aeb3b7", "#3a6587", "#3a6587"];

और फिर,

.attr("fill", function(d, i) {
                return color[i];
            })
1
Shane G 2 अक्टूबर 2018, 19:21