d3js绘制多系统柱形图

//创建画布

var seriesNames=getSeriesName(chartData);
var maxData = getMaxChartData(chartData);
var minData = getMinChartData(chartData);
var svg = d3.select("#column")
        .append("svg")
        .attr("width", canvasWidth  )
        .attr("height", canvasHeight);

xScale = d3.scale.ordinal()
        .domain(chartData[0].xMarks)
        .rangeRoundBands([margin.left, canvasWidth-margin.left], .1);
xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom");

yScale = d3.scale.linear()
        .domain([minData, maxData])
        .range([canvasHeight-margin.bottom,margin.top]);
yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left"); // .ticks(5) 控制段数
 var xBar =svg.append("g")
        .attr("class", "xAxis")
        .attr("transform", "translate(0,"+(yScale(minData))+ ")")
        .call(xAxis)

var  yBar=svg.append("g")
        .attr("class", "xAxis")
        .attr("transform", "translate(" + margin.top + ",0)")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - margin.left)
        .attr("x", 0 - (canvasHeight / 2))
        .attr("dy", "1em")
        .text("测试竖标题");
svg.append("text")
        .attr("x", canvasWidth-margin.left ) .attr("y", yScale(minData) + 10)
        .attr("text-anchor", "middle")
        .text("月份");
xColumnWidth= d3.scale.ordinal();
 xColumnWidth.domain(seriesNames).rangeRoundBands([0, xScale.rangeBand()]);

var len=getDataLength(chartData);
var  kColumnObject=new kColumnObject();
for(var i=0;i<len;i++)
{
    kColumnObject.initColumn(i)
}
addLegend()

function addLegend() {
    var legend = svg.selectAll(".legend")
            .data(seriesNames)//seriesNames.slice().reverse()
            .enter().append("g")
            .attr("class", "legend")
            .attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; });

    legend.append("rect")
            .attr("x", canvasWidth - margin.left)
            .attr("width", 18)
            .attr("height", 18)
            .style("fill", color);

    legend.append("text")
            .attr("x", canvasWidth -  margin.left-5)
            .attr("y", 9)
            .attr("dy", ".35em")
            .style("text-anchor", "end")
            .text(function (d) { return d; });
}
/**添加柱形图
 */
function kColumnObject()
{
    this.group = null;
    this.initColumn = function (id) {
        var arr = chartData[0].series[id].data;
        this.group = svg.append("g").attr("class", "column");
        this.group.selectAll("rect")
                .data(arr)
                .enter()
                .append("rect")
                .attr("width", xColumnWidth.rangeBand())
                .attr("x", function (d, i) { return xScale(chartData[0].xMarks[i]) + xColumnWidth.rangeBand() * id; })
                .attr("y", function (d) {
                    return yScale(Math.max(0, d));
                })
                .attr("height", function (d) { return Math.abs(yScale(d) - yScale(0)); })
                .style("fill", colors[id])
                .attr("cursor", "pointer");


        this.group.selectAll("text")
                .data(arr)
                .enter().append("text")
                .attr("x", function (d, i) { return (xScale(chartData[0].xMarks[i]) + xColumnWidth.rangeBand() * id) + 1; })
                .attr("y", function (d) {
                    return yScale(Math.max(0, d) - 2);
                })
                .attr("fill", "red")
                .attr("dy", ".35em")
                .text(function (d) { return d; });
    }
}


/**返回系列名
 * @参数 data 柱图数据
 */
function getSeriesName(data)
{
    var len=data[0].series.length;
    var seriesName  = [];
    for(var  i=0;i<len;i++)
       {
           seriesName.push(data[0].series[i].name);
       }
    return seriesName;
}

/**返回长度
 * @参数 data 柱图数据
 */
function getDataLength(data)
{
    var len=data[0].series.length;
    return  len;
}

/**返回chartData最大值
 * @参数 data 柱图数据
 */
function getMaxChartData(data) {
    var maxData = 0;
    var len = data[0].series.length;
    for (var i = 0; i < len; i++) {
            maxData = d3.max([maxData, d3.max(data[0].series[i].data)]);
    }
    return maxData;
}
/**返回chartData最小值
 * @参数 data 柱图数据
 */
function getMinChartData(data) {
    var minData = 0;
    var len = data[0].series.length;
    for (var i = 0; i < len; i++) {
        minData = d3.min([minData, d3.min(data[0].series[i].data)]);
    }
    return minData;
}

 

免积分下载传送门