Tworzę wykres słupkowy w pliku nvd3.js, podobnym do tego przykładu: http://nvd3.org/ghpages/discreteBar.html. Zastanawiałem się, czy istnieje sposób na usunięcie linii siatki, aby tło było białe. Wszystkie przykłady używają linii siatki. Sprawdziłem również kod źródłowy i nie widziałem nic w dyskretnym modelu, który by to umożliwiał.Jak usunąć linie siatki tła w pliku nvd3.js?
Odpowiedz
Można wybrać te linie siatki w swoim CSS i ustawić ich krycie 0:
.tick {
opacity: 0;
}
Jeśli nadal chcesz zobaczyć odniesienia, można zmodyfikować to:
.tick:not(.zero) {
opacity: 0;
}
Użyj swojej narzędzia inspektorów przeglądarki, aby zobaczyć, jakie klasy mają poszczególne elementy, które chcesz zmodyfikować i wykorzystać moc CSS.
.tick {
opacity: 0;
}
nie działa dla pionowych linii na wykresie discreteBar ponieważ używają inline css ustawić krycie do 1. Ale to działa:
.tick {
display: none;
}
Będzie to również ukryć etykiety na osiach . Jeśli chcesz usunąć wiersze, ale zachować etykiety, należy:
.tick line {
display: none;
}
I found bardziej konkretne rozwiązanie, które działa dobrze:
(Usuwa wszystkie siatki, ale można być selektywny, tj. y1.axis)
.nvd3.multiChart .axis .nv-axis line {
stroke: none;
fill: none;
}
Nie jestem pewien czy zmieniło się to w nvD3, ale musiałem użyć tego: .nv-y1 .tick line {stroke: none; wypełnienie: brak; } – CMerrill
Aby pozbyć się tych wytycznych i zachować etykiety używać
.tick line {
opacity: 0;
}
wystarczy zaktualizować css z
.tick line {
display: none;
}
Dzięki który pracował idealnie – amauboussin
Wydaje się, że obecne nvd3.js używa stylu inline atrybuty, aby dodać linie podziałki (przynajmniej przy korzystaniu z dyskretną wykres słupkowy) tak CSS robi” t działa w tym przypadku, ponieważ wbudowane 'style =" opactity: 1 "' ma pierwszeństwo. – craigb
możesz chcieć przesłonić styl inline, używając 'opacity: 0! Important;' – linqu