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

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)

一起使用

到目前为止，我的应用程序中的所有图表都运行良好。但是当我尝试自定义条形填充时，我遇到了一个奇怪的行为。栏是不可见的，当鼠标悬停时显示栏。试图找出它的来源，但没有发现任何异常。

有什么想法吗？我使用的 json 与 JSFiddle 中显示的完全相同，它实际上是复制粘贴。

透明条

感谢您的宝贵时间。

更新

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

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。使用规则设置颜色

不要使用默认添加渐变的 '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/

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

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

Bar Charts filled by Node is transparent and the bar display only on hover

zingchart