d3.js——柱狀圖

    我在作bar圖的時候感受他就是先建立一個svg的容器，而後建立比例尺、座標軸，柱形，文字，這些元素，而後轉換一個角度，變換一下位置，把不少元素組合成一個g元素中加入svg標籤中。剩下的就是一些方法的使用，這個得看官網的api,其實對於d3.scale.ordinal()、rangeRoundBands([0, width], 0.1)這些方法也不是特別懂，還得再學習。

一、效果

二、html頁面

 <div id="barChart"></div>

 

三、css

<style type="text/css">
    /*柱狀圖樣式*/
    .chart rect {
        stroke: white;
        fill: steelblue;
    }

    .chart rect:hover {
        fill: brown;
    }

    /*控制座標軸樣式*/
    .axis path,
    .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }

    .axis text {
        font-family: sans-serif;
        font-size: 11px;
    }

    .axis g text {
        font-family: sans-serif;
        font-size: 11px;
        color: black;
    }
</style>

 

四、js

<script src="~/Scripts/d3.v3.min.js"></script>

 

// 查詢數據，數據就是後臺返回的json數據
grid.load(obj, function (result) {
    if (result.total > 0) {
        //grid.setData(mini.decode(result.data));
        //grid.setTotalCount(result.total);
        BarChart(result.data);
    } else {
        mini.alert("沒有查詢到相關數據，請從新篩選！");
    }
}, function (e) {
    mini.alert("出現錯誤，請從新查詢！");
});

 

 

 

//柱狀圖表js,我下面的東西都是一塊一塊的，用上哪段就能獲得想要的效果
<script type="text/javascript">
    function BarChart(data) {
        //?d3.scale.ordinal()和他們的domain,,,translate，dy屬性

        // 一、清空圖表區內的圖表,從新生成
        $('#barChart').html("");

        // 二、定義初始化數據，圖表的上下左右距離和寬高,連續定義
        var margin = { top: 60, right: 30, bottom: 70, left: 50 },
            width = 1000 - margin.left - margin.right,
            height = 400 - margin.top - margin.bottom;

        // 三、建立容器並移動位置到合適(注意：這點由於append了一個g因此返回的svg實際上是這個g，後面的元素都在這裏，定位也是相對於他)
        var svg = d3.select("div#barChart").append("svg")
            .attr("class", "chart")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // 四、定義計算X軸的線性比例尺的方法
        //散列值 把width平均分配到data的每一個數據段（好比是6個） 0~80，80~160,...值爲（0，80，160，...）域寬80
        var xScale = d3.scale.ordinal()
            .domain(data.map(function(d) { return d.EquipName; }))
            //.rangeRoundBands([0,width], .1,1);//兩種效果不同
            .rangeRoundBands([0, width], 0.1);

        // 五、定義計算Y軸的比例尺的方法
        var yScale = d3.scale.linear()
            .domain([0, d3.max(data, function(d) { return d.Downtime; })])
            .range([height, 0]);

        // 六、建立X座標軸函數
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom");

        // 七、建立Y軸座標軸函數
        var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left");

        // 八、建立柱狀圖（注意：貌似定位都是相對於左上角）
        svg.selectAll(".barRect").data(data).enter().append("rect")
            .attr("class", "barRect")
            .attr("x", function(d) { return xScale(d.EquipName); })//至關於function(d){return xScale(d);}
            .attr("y", function(d) { return yScale(d.Downtime); })//svg的座標以左上角爲原點,經過高度運算轉成原點在左下角的效果
            .attr("width", xScale.rangeBand()) //獲取散列值每段的長度 爲矩形的寬
            .attr("height", function(d) { return height - yScale(d.Downtime); }); // 經過函數yScale  function(d){return  (420/42)*d}  獲得矩形的高

        // 九、加背景橫線
        svg.selectAll("line")
            .data(yScale.ticks(10))   //y.ticks 根據權重 把數據進行劃分層次，增長可讀性。能夠本身改變ticks的值察看效果來理解
            .enter().append("line")   //畫線 （x1,y1） ------> (x2,y2)
            .attr("x1", 0)
            .attr("x2", width)
            .attr("y1", function(d) { return height - yScale(d); })
            .attr("y2", function(d) { return height - yScale(d); })
            .style("stroke", "#ccc");

        // 十、加圖表標題
        svg.append("text")
            .attr("x", (width / 2))
            .attr("y", -40)
            .attr("text-anchor", "middle")
            .style("font-size", "16px")
            .style("text-decoration", "underline")
            .text("最差十臺設備停機時間表");

        // 十一、添加矩形上方的數字
        svg.selectAll(".label")
            .data(data)
            .enter().append("text")
            .attr("class", "label")
            .attr("x", function(d) { return xScale(d.EquipName) + xScale.rangeBand() / 2; })  //散列值+散列寬度的一半
            .attr("y", function(d) { return yScale(d.Downtime); })
            .attr("dx", ".35em") //  horizontal-align: middle 居中對齊
            .attr("dy", 0) // vertical-align: middle //垂直方向無偏移
            .attr("text-anchor", "end") // text-align: right
            .text(function(d) { return d.Downtime; });
            //.text(String); //設置數據爲顯示值 至關於.text(function(d){ return d;}


        // 最後加座標軸不然影響不少東西
        // 9九、添加X座標軸及座標軸名稱
        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
            .append("text")
            .attr("transform", "translate(" + (width) + "," + 20 + ")")
            .style("text-anchor", "middle")
            .text("設備名稱");

        // 若是x軸名稱太長將其傾斜
        svg.selectAll(".axis g text")
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", "rotate(-35)");

        // 100、添加Y座標軸及座標軸名稱
        svg.append("g")
            .attr("class", "axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(0)")
            .attr("x", 50)
            .attr("y", -20)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("停機時間(h)");
    }
</script>