Измените цвет фона моей области серии с ямочкой

Question

Измените цвет фона моей области серии с ямочкой

0

Как я могу изменить цвет области? Я попытался добавить в свой файл 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/

user3118887 03 янв. 2014, в 14:05

Источник

2

Можете ли вы опубликовать код? Jsfiddle был бы очень полезен
Tasos K. 03 янв. 2014, в 12:26
1

поставить свой код js, который вы применяете?
Satish Sharma 03 янв. 2014, в 12:27
0

создайте скрипку, если можете.
Deep Sharma 03 янв. 2014, в 12:31
0

Не какой-то код, но соответствующий код. Я мог видеть gridlines любом месте вашего кода
Surjith S M 03 янв. 2014, в 12:33
0

Код находится в файле jsfiddle. сожалею
user3118887 03 янв. 2014, в 12:35

Показать ещё 3 комментария

Теги:

javascript

html

dimple.js

2 ответа

0

Вы должны дать класс для .tick not .gridlines

Рабочая демонстрация

CSS

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

Кроме того, я не смог найти .plot в HTML

Surjith S M 03 янв. 2014, в 09:47

0

Это только меняет строки и метки. Я хочу, чтобы вся область, когда димпл сюжетная линия меняла свой цвет. Не этикетки
user3118887 03 янв. 2014, в 12:48
0

@ user3118887 Вы имеете в виду это jsfiddle.net/surjithctly/zFzV8/49
Surjith S M 03 янв. 2014, в 12:53
0

Нет. Площадь между двумя осями.
user3118887 03 янв. 2014, в 12:55

Показать ещё 1 комментарий

Ещё вопросы

Можете ли вы опубликовать код? Jsfiddle был бы очень полезен
поставить свой код js, который вы применяете?
Не какой-то код, но соответствующий код. Я мог видеть gridlines любом месте вашего кода
Код находится в файле jsfiddle. сожалею
Это только меняет строки и метки. Я хочу, чтобы вся область, когда димпл сюжетная линия меняла свой цвет. Не этикетки
@ user3118887 Вы имеете в виду это jsfiddle.net/surjithctly/zFzV8/49

John Kiernander · Accepted Answer · 2014-01-03T12-06-00.000Z

Вы можете покрасить только область графика, добавив прямоугольник 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 диаграммы и убедиться, что они совпадают.