根据值为dimple.js条形图添加颜色并添加目标线

Question

我有3个查询。 1）如何在条形图中添加自定义颜色？例如，在附图中，我想为Metric Pink和Blue添加不同的颜色。 2）我想将水平线显示为例如目标/目标值。在y轴上为3.0k。 3）图表应按1月，2月，3月，4月的顺序呈现x轴值，这是现在没有发生的。请指教。 <div class="row"> <div id="test" class="column"> <h2>&nbsp;&nbsp;Pink and Blue Distribution</h2> <script type="text/javascript"> var svg = dimple.newSvg("#test", 590,400); var json = JSON.parse('${rlog}'); var data = [ {"Month": "Jan", "Metric": "Pink", "Value": 200}, {"Month": "Feb", "Metric": "Pink", "Value": 320}, {"Month": "Mar", "Metric": "Pink", "Value": 200}, {"Month": "Apr", "Metric": "Pink", "Value": 320}, {"Month": "Jan", "Metric": "Blue", "Value": 1000}, {"Month": "Feb", "Metric": "Blue", "Value": 2500}, {"Month": "Mar", "Metric": "Blue", "Value": 1500}, {"Month": "Apr", "Metric": "Blue", "Value": 3001} ]; var chart = new dimple.chart(svg, data); chart.setBounds(80, 30, 480,330); var x = chart.addCategoryAxis("x",["Month","Metric"]); var y1 = chart.addMeasureAxis("y", "Value"); var bars = chart.addSeries("Metric", dimple.plot.bar, [x, y1]); bars.barGap = 0.5; chart.addLegend(65, 10, 510, 20, "right"); chart.draw(); </script> </div> </div>

Answer 1

试试这个

http://jsfiddle.net/cmubick/n5x0gkdy/

1）自定义颜色：

chart.assignColor("Pink","pink");
chart.assignColor("Blue","blue");

2）值= 3000的水平线：

var line = chart.addSeries("Line", dimple.plot.line);
    line.data = [
        { "Line" : "line", "Month": "Jan", "Metric": "Blue", "Value" : 3000  },
        { "Line" : "line", "Month": "Apr", "Metric": "Blue", "Value" : 3000  }
    ];    

3）按月排序x轴

x.addOrderRule(["Jan", "Feb", "Mar", "Apr"]);

Answer 2

对于2）你可以使用下面这样的东西来添加水平线。我使用以下代码生成规则（水平网格线）

            var rule = svg.selectAll("g.rule")
                .data(y.ticks(5)) 
                .enter().append("svg:g")
                  .attr("class", "rule")
                  .attr("transform", function(d) { return "translate(0," + y(d) + ")"; });
            rule.append("svg:line")
                .attr("x2", width)
                .style("stroke", function(d) { return '#f00' })   //return my own color
                .style("stroke-width", 0.5)  
                .style("stroke-opacity", function(d) { return 1; });  //you could return 0 for ticks where you do not want rules, or some other condition