Question

我想绘制一个垂直条形图，其中“参考”值会随每个条形而变化。例如，假设我正在绘制本季的销售水平，我想将其与上一季的销售水平进行比较。

我知道我可以绘制两个系列条形图，但我更喜欢这种方式，因为它更加强调实际的季节。

我设法在“常规”垂直条上绘制浮动垂直条，但我想将浮动条设置为大于“常规”垂直条。两个系列都需要共享相同的比例和最小 - 最大点数。

哦，理想情况下，我想将“参考”系列（上一季）的颜色设置为黑色而不取代其他颜色（我使用调色板绘制系列，每个系列都有它自己的颜色从一个图表到另一个图表）。会不可能？

下面是我想要实现的目标，以及到目前为止我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
        <script type="text/javascript" src="http://dimplejs.org/dist/dimple.v2.1.0.min.js"></script>
    </head>


<div class="chartContainerMax" id="chart1" style="height:600px"></div>


<body>



<script type="text/javascript">

    var chart = dimple.newSvg("#chart1", "100%", "100%");
    d3.csv("data/test.csv", function (data) {
        data = dimple.filterData(data, "Owner", ["Aperture", "LexCorp"]) // Filtering values
        var myChart = new dimple.chart(chart, data);
        myChart.setMargins("10%", "5%", "5%", "10%")
            var xAxis = myChart.addCategoryAxis("x", "Month");
            xAxis.addOrderRule("Date");
            var yAxis = myChart.addMeasureAxis("y", "Price");
            var yyAxis = myChart.addMeasureAxis(yAxis, "Distribution");
            myChart.addSeries("Season",  dimple.plot.bar, [xAxis, yAxis]);
            var myRef = myChart.addSeries("Previous",  dimple.plot.bar, [xAxis, yyAxis]);
            myRef.stacked = false;
            //myRef.dimpleColor("#292E3A");
            //myRef.shapes.selectAll("rect").attr("transform", "translate(0, -100)");
            //myRef.shapes.selectAll("rect").attr("color", "black");
            myChart.addLegend("5%", "5%", "90%", "10%", "right");
        myChart.draw();
    });

</script>
</body>
</html>

欢迎任何建议。谢谢！

Answer 1

如果我理解正确，下面的示例应包含您要查找的所有元素的示例（以及更多）：

var svg = dimple.newSvg("#chartContainer", 600, 400),
    data = [
       { "Category": "a", "Current": 123456789, "Previous":153456789 },
       { "Category": "b", "Current": 234567890, "Previous":204567890 }
    ],
    chart = new dimple.chart(svg, data),
    x = chart.addCategoryAxis("x", "Category"),
    yCurrent = chart.addMeasureAxis("y", "Current"),
    // Note this references the y axis instead of a string, this creates a composite
    // axis with 2 measures on a single axis
    yPrevious = chart.addMeasureAxis(yCurrent, "Previous"),
    stackedSeries = chart.addSeries("Stacked", dimple.plot.bar, [x, yCurrent]);
    floatingSeries = chart.addSeries("Floating", dimple.plot.bar, [x, yPrevious]);

// Set a narrower stacked bar
stackedSeries.barGap = 0.3;
// Set the second series to floating
floatingSeries.stacked = false;
// Set the bar height
yPrevious.floatingBarWidth = 15;
// Set a title for the y axis
yCurrent.title = "Sales";
// Set a specific colour for the floating bars
chart.assignColor("Floating", "black", "black", 1);

chart.draw();

这里有效：http://jsbin.com/hosobo/8/edit?js,output

浮动条+栏将值与'＆＃34;参考＆＃34;进行比较

1 个答案: