zingchart - 节点填充的条形图是透明的，条形仅在悬停时显示

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

透明条



谢谢你的时间。

更新

属性 fill: url(#...)在我的 AngularJs 应用程序中无法识别，因为我不在根 url 中。
示例应用程序/图形，只有当我将状态“图形”添加到这样的属性中时它才会工作:

url(graph#...) 

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

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

Answer 1

正如 Z.Ben 在评论中指出的那样，无法访问渐变 (SVG) 看起来是 ZingChart 和 Angular 路由的问题。我会检查这个问题，看看我们是否能找到解决办法。 (我在 ZingChart 团队)。

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

1.更改渲染类型

ZingChart 默认使用 SVG 呈现图表。通过切换到备用渲染“ Canvas ”，您应该能够在 angular 应用程序中渲染渐变，因为 Canvas 直接在 Canvas 元素上渲染渐变。

只需将渲染对象传递到您的指令中:

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

这些解决方案中的任何一个都应该有效。