5

这是我正在尝试做的一个例子：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#...)

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

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

4

1 回答 1

6

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

不要使用默认添加渐变的“样式”属性，而是利用规则来定位每个系列中的特定节点。

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

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

于 2016-04-26T18:06:44.707 回答