バーチャートはここだけホバー

Question

上に透明とバー表示である私がやろうとしているものの例である： 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] 
    }] 
} 

私はZingchart（2.3.0）を使用していますAngularJs（1.4.7）とIonic（1.1.0）

これまでのところ、私のアプリのすべてのチャートは正常に動作しています。しかし、バーの塗りつぶしをカスタマイズしようとしたとき、私は奇妙な動作をしました。 バーが見えなくなり、マウスがホバーするとバーが表示されます。それはどこから来ていたのか理解しようとしましたが、何も奇妙なものは見つかりませんでした。

私はJSFiddleに表示されたものと全く同じjsonを使用しました。これは文字通りcopy-pasteです。

透明バー

はあなたの時間をありがとうございました。

更新

私はルートURLではないよと属性fill: url(#...)は、私のAngularJsアプリで認識されていません。私の質問が続いている

url(graph#...) 

、私はなしでやろうとしているものを達成するための方法があります：私はこのような属性に状態「グラフ」を追加した場合 例アプリ/グラフは、それだけで動作しますグラデーションを使用して？

問題を解決するアプリの状態ごとにタグを追加しないようにしたいと考えています。

Answer 1

Z.Benはコメントの中で述べているように、ZingChartとAngularを使ったルーティングでは、アクセスできないグラデーション（SVG）が問題になるようです。私はこの問題を見て、解決策が見つかるかどうかを見ていきます。 （私はZingChartチームにいる）。

暫定的な解決策としては、これについていくつかの方法があります。

1.変更レンダリングタイプ

ZingChartはデフォルトでSVGを使ってグラフを描画します。キャンバスはキャンバス要素に直接グラデーションをレンダリングするので、別のレンダリング 'キャンバス'に切り替えると、角度付きアプリケーションでグラデーションを問題なくレンダリングできます。

単にあなたの指示に描画オブジェクトを渡します。その代わり、デフォルトでグラデーションを追加し「スタイル」プロパティを使用してのルール

を使用して色を設定し

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

2を、にルールを利用各シリーズ内の特定のノードをターゲットにします。

$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/

これらのソリューションのいずれかが動作するはずです。