由Node填充的条形图是透明的，条形图仅在悬停

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，它实际上是一个复制粘贴。

透明栏

谢谢你的时间。

更新

我的AngularJs应用无法识别属性fill: url(#...)，因为我不在根网址中。 示例app / graph，只有在我添加状态＆＃39;图表时它才会起作用。进入这样的属性：

url(graph#...) 

我的问题是，有没有办法实现我在不使用渐变的情况下尝试做的事情？

我想避免为我的应用的每个状态添加一个标记来解决问题。

Answer 1

正如Z.Ben在评论中指出的那样，无法访问渐变（SVG）似乎是ZingChart和使用Angular进行路由的问题。我会看到这个问题，看看我们是否能找到解决方案。 （我在ZingChart团队。）

至于临时解决方案，有几种方法可以解决这个问题。

<强> 1。更改渲染类型

ZingChart默认使用SVG渲染图表。通过切换到备用渲染“画布”，您应该能够在角度应用中渲染渐变没问题，因为画布直接在画布元素上渲染渐变。

只需将渲染对象传递给指令：

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

<强> 2。使用规则设置颜色

不使用默认情况下添加渐变的'styles'属性，而是使用规则来定位每个系列中的特定节点。

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

这些解决方案都应该有效。