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

这是我要执行的操作的一个示例:
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(#...)属性，因为我不在根URL中。
示例应用程序/图形，仅当我将状态“图形”添加到这样的属性中时，它将起作用:

url(graph#...)

那么我的问题是，有没有一种方法可以在不使用渐变的情况下实现我要执行的操作？

我想避免为应用的每个状态添加标签，以解决该问题。

最佳答案

正如Z.Ben在评论中指出的那样，无法访问渐变(SVG)似乎是ZingChart和Angular布线的问题。我将研究这个问题，看看是否可以找到解决方案。 (我在ZingChart团队中)。

至于临时解决方案，有两种方法可以解决此问题。

1.更改渲染类型

默认情况下，ZingChart使用SVG渲染图表。通过切换到备用渲染“ Canvas ”，您应该能够在角度应用程序中毫无问题地渲染渐变，因为 Canvas 直接在 Canvas 元素上渲染了渐变。

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

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

这些解决方案中的任何一个都应该起作用。

关于zingchart - 节点填充的条形图是透明的，并且条形图仅在悬停时显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36853573/