Question

我正在堆叠吧聊天。但是我无法在下面的代码中添加图例（请求，服务，等待），标题，x标签，y标签和工具提示我需要更清晰一点。请帮助我如何添加这些东西

我修改了我的代码，并且能够添加图例，但我无法添加工具提示请帮助我，当我点击栏时，它应该显示工具提示，如Total Request“：10”Serverd“： 8和“Wating”：2

在此处编辑代码

 var data = [
{ "date": "5/2014", "Total Request": 10, "Serverd": 8, "Wating": 2 },
{ "date": "6/2014", "Total Request": 20, "Serverd": 12, "Wating": 8 },
{ "date": "7/2014", "Total Request": 30, "Serverd": 20, "Wating": 10 },
{ "date": "8/2014", "Total Request": 40, "Serverd": 30, "Wating": 10 },
{ "date": "9/2014", "Total Request": 10, "Serverd": 5, "Wating": 5 },
{ "date": "10/2014", "Total Request": 34, "Serverd": 30, "Wating": 4 },
{ "date": "11/2014", "Total Request": 32, "Serverd": 22, "Wating": 10 },
{ "date": "12/2014", "Total Request": 40, "Serverd": 20, "Wating": 20}];


        var margin = { top: 25, right: 40, bottom: 35, left: 85 },
    width = 550 - margin.left - margin.right,
    height = 250 - margin.top - margin.bottom;

        var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

        var y = d3.scale.linear()
    .rangeRound([height, 0]);

        var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

        var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

        var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

        var svg = d3.select("#showstackedChart").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 + ")");

             color.domain(d3.keys(data[0]).filter(function (key) { return key !== "date"; }));

            data.forEach(function (d) {
                var y0 = 0;
                d.ages = color.domain().map(function (name) { return { name: name, y0: y0, y1: y0 += +d[name] }; });
                d.total = d.ages[d.ages.length - 1].y1;
            });

            data.sort(function (a, b) { return b.total - a.total; });

            x.domain(data.map(function (d) { return d.date; }));
            y.domain([0, d3.max(data, function (d) { return d.total; })]);

            svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

            svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

            var state = svg.selectAll(".state")
      .data(data)
    .enter().append("g")
      .attr("class", "g")
      .attr("transform", function (d) { return "translate(" + x(d.date) + ",0)"; });

            state.selectAll("rect")
      .data(function (d) { return d.ages; })
    .enter().append("rect")
      .attr("width", x.rangeBand())
      .attr("y", function (d) { return y(d.y1); })
      .attr("height", function (d) { return y(d.y0) - y(d.y1); })
      .style("fill", function (d) { return color(d.name); });

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

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

            legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function (d) { return d; });

如何在堆积条形图中添加图例和工具提示

0 个答案: