由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,它实际上是一个复制粘贴.

透明棒

谢谢你的时间.

更新

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

url(graph#...) 

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

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

Answer 1

作为Z.Ben在评论中所指出的,梯度(SVG)不是访问看起来是与ZingChart的问题,并与角路由.我会看到这个问题,看看我们是否能找到解决方案.(我在ZingChart团队).

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

1.更改渲染类型

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

只需将render对象传递给指令:

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

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