słupkowe wypełnione przez węzeł jest przezroczysta, a na wyświetlaczu bar tylko na najechaniu

Question

Oto przykład tego, co próbuję zrobić: http://jsfiddle.net/4pb8uzt8/13/

$scope.myJson = { 
    'plot': { 
    'styles': ['#fff', 'red', 'pink'] 
    }, 
    'scale-x': { 
    'values': ['white', 'red', 'pink'] 
    }, 
    'type': 'bar', 
    'series': [{ 
    'text': 'Product History Color', 
    'values': [2, 6, 8] 
    }] 
} 

Używam Zingchart (2.3.0) z AngularJs (1.4.7) i Ionic (1.1.0)

Do tej pory wszystkie wykresy w mojej aplikacji działają poprawnie. Ale kiedy próbowałem dostosować zapełnienia baru, dostałem dziwne zachowanie. Słupki są niewidoczne, a po najechaniu myszą wyświetlany jest pasek. Próbowałem ustalić, skąd się wziął, ale nie znalazłem nic dziwnego.

Każdy pomysł? Użyłem dokładnie tego samego json, niż pokazano w JSFiddle, to dosłownie kopiuj-wklej.

Przezroczyste Bary

Dziękuję za Twój czas.

Aktualizacja

Atrybut fill: url(#...) nie jest rozpoznawany w moim angularjs aplikacji, ponieważ nie jestem w adresie URL głównego. Przykład app/wykres, to będzie działać tylko wtedy, gdy dodam stan „Graf” do atrybutu jak poniżej:

url(graph#...) 

Moje pytanie brzmi więc, czy istnieje sposób, aby osiągnąć to, co staram się zrobić bez używając gradientów?

Chciałbym uniknąć dodawania tagu do każdego stanu mojej aplikacji, który rozwiąże problem.

Answer 1

Jak zauważył Z.Ben w komentarzach, gradienty (SVG) nie są dostępne, wydaje się być problemem z ZingChart i routingiem z Angular. Poproszę o sprawdzenie tego problemu, aby sprawdzić, czy możemy znaleźć dla niego rozwiązanie. (Jestem w zespole ZingChart).

Jeśli chodzi o rozwiązania tymczasowe, istnieje kilka sposobów rozwiązania tego problemu.

1. Zmiana typu renderowanie

ZingChart renderuje wykresy z wykorzystaniem SVG domyślnie. Przełączając się na alternatywne "płótno" renderowania, powinieneś być w stanie renderować gradienty bez problemu w twojej kanciastej aplikacji, ponieważ płótno renderuje gradienty bezpośrednio na elemencie canvas.

Wystarczy przekazać obiekt renderowania w twojej dyrektywy:

$scope.myRender = { 
    output :'canvas' 
}; 
<zingchart id="chart-1" zc-render="myRender" zc-values="myValues"></zingchart> 

2. Ustaw kolory używając reguł

Zamiast właściwość „style”, która dodaje gradienty domyślnie wykorzystują przepisach celuj w określone węzły w ramach każdej serii.

$scope.myJson = { 
    'plot': { 
    'rules': [ 
     {'rule': '%i == 0', 'backgroundColor': 'white'}, 
     {'rule': '%i == 1', 'backgroundColor': 'red'}, 
     {'rule': '%i == 2', 'backgroundColor': 'pink'}, 
    ] 
    }, 
    'scale-x': { 
    'values': ['white', 'red', 'pink'] 
    }, 
    'type': 'bar', 
    'series': [{ 
    'text': 'Product History Color', 
    'values': [2, 6, 8] 
    }] 
} 

http://www.zingchart.com/docs/basic-elements/create-javascript-rules/

Każde z tych rozwiązań powinno działać.