Question

我怎样才能改变系列区域的颜色？我试图将此

添加到我的css文件中

规则： .gridlines{background-color:#345;}

但它不起作用。

这是我的代码：

var svg = dimple.newSvg("#meteo_pop_up_grafica_imagen", 500, 450);
data2.forEach(function (d) {

                    d["Hour"] = d["time"].substring(11,20)+d["time"].substring(8,10)+d["time"].substring(3,7)+d["time"].substring(23,28);
                    d["Day"] = d["time"].substring(8,10)+d["time"].substring(3,7)+d["time"].substring(23,28);
                    //d["Time of Day"] = d["time"].substring(d["time"].length - 7);
                }, this);
 var myChart = new dimple.chart(svg, data2);
 var x1 = myChart.addTimeAxis("x","Hour","%H:%M:%S %d %b %Y","%H:%M");
 var x2 = myChart.addTimeAxis("x","Day","%d %b %Y", "%d-%b-%Y");
  x1.addOrderRule("time");

x1.timePeriod = d3.time.hours;
x1.timeInterval = 4;
x2.timePeriod = d3.time.days;
x2.timeInterval = 1;
var y1 = myChart.addMeasureAxis("y", "Piranometro");
var piranometro = myChart.addSeries("Piranom.", dimple.plot.line,[x1,y1]);
myChart.assignColor("Piranom.","blue");
 myChart.draw();


                x1.shapes.selectAll("text").attr("transform",
                        function (d) {
                          return d3.select(this).attr("transform") + " rotate(-90)";
                        });

您可以在此处找到代码：

http://jsfiddle.net/zFzV8/45/

Answer 1

您必须为.tick而非.gridlines

上课

<强> Working Demo

<强> CSS

.tick {
    fill: rgba(250, 250, 255, 0.6);
}

另外，我在HTML

中找不到.plot

Answer 2

您可以通过在图表后面添加svg矩形来仅为绘图区域着色。在这里，我创建一个与图表相同的边界。要使用css，只需设置一个类而不是填充：

我已将svg的高度和宽度放入变量并使用代码：

svg.append("rect")
    .attr("x", width * 0.1)
    .attr("y", height * 0.1)
    .attr("width", width * 0.8)
    .attr("height", height * 0.8)
    .style("fill", "#456");

http://jsfiddle.net/2Gj3G/

Dimple默认为10％的边距，所以我在这里使用了它，但是使用图表的setBounds方法并确保它们匹配会更简洁。

用凹坑改变我的系列区域的背景颜色

2 个答案: