问题标签 [zingchart]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
388 浏览

jquery - Zingchart - 按 ID 添加和删除图

这可能是一个简单的问题,但我无法在任何地方找到答案。我有一个动态添加新图的图表。现在我需要删除一些图,但是我需要通过 id 而不是索引来识别图。

根据文档,可以通过 ID 删除绘图。但是,我使用的是Jquery 包装器,它只讨论按索引删除。在任何情况下(有或没有 JQuery)我都无法让它工作,我不确定这是因为我添加情节的方式、删除它的方式或我自己配置​​情节的方式。

代码在这里

(注意我使用的是 Jquery 包装器,但为方便起见,小提琴不是)。

编辑: 正如所指出的patrick-rodee,解决方案是这样的:

  • 添加绘图时,在内部使用id(not plotid) 。data
  • 删除绘图时使用plotid(不带)。data

    /li>

编辑2:

顺便说一句,默认情况下的行为似乎有点令人困惑:如果添加两个图,一个将绘制为蓝色,另一个绘制为红色,然后删除蓝色图,然后再次添加 -> 它将被绘制在红色,所以会有两个颜色相同的图。

0 投票
1 回答
99 浏览

scroll - 如何在 Zingchart 网格上添加滚动条?

我想滚动是否需要添加一些代码导致滚动?

截图 1

0 投票
2 回答
143 浏览

javascript - ZingChart 在 wordcloud 图表(标签图表)中不支持 utf 字符

你可以从这里看到演示小提琴;

如您所见,除此之外的所有俄语和中文单词,一些土耳其语字符在此演示中不起作用。我不想改变我的图表类型,因为我曾经使用过 highcharts。d3 可能是最好的解决方案,但它对我来说工作量太大,因为我们有太多图表。

不工作的字符:ç,ı,ğ,ş,ü 所有俄语和中文

0 投票
1 回答
229 浏览

charts - ZingChart - 改变 ValueBox 的属性

我正在使用 ZingChart 创建一个简单的饼图。我正在使用 ColdFusion 标签和一个 json 文件来设置图表的样式。在下面的示例中,我的“目标”系列(我要“突出显示”的系列)是 2,我通过偏移它并在其周围放置边框来操作该切片(参见示例)。这样做的问题是,如果饼图非常小,则边界无法区分。

我的目标是突出显示与我的目标切片/系列关联的单个值框。我研究并试验了“规则”。下面的示例针对 %v = 17.1 进行了硬编码(恰好是系列 2 的值)。这个例子中的 valuebox 在它下面有一个边框,这很棒。但我不能使用值标记 (%v),因为可能有多个具有相同值的系列。我已经尝试了许多可用的令牌,但我似乎无法找到一个代表我确定的“目标”系列的令牌。我认为根据情节的文本(%t)突出显示可能很简单,但我试过了,但这也不起作用。

我尝试过使用“自定义令牌”功能,但目前不打算这样做,因为它也不起作用。

我如何“突出显示”系列 2 的值框,大概使用规则(希望使用可用的令牌)?

谢谢

0 投票
1 回答
635 浏览

charts - 如何在 ZingChart 中对齐折线图和条形图之间的垂直参考线?

随着 ColdFusion 9 到 ColdFusion 11 的更新,底层图表引擎从 WebCharts3D 更改为 ZingCharts。虽然我设法为两个库之间的大多数不兼容问题及其在<cfchart>标签中的实现找到了解决方案,但我正在努力解决在 ColdFusion 9 中没有出现的对齐问题。我什至没有找到修复尝试纯 JavaScript 和 HTML。

在 WebCharts3D 中,参考线和刻度在条形图中的条形中居中。组合折线图和条形图具有指向条形中心并通过折线图标记的指南。这与折线图中的行为完全相同。

在 ZingCharts 中,组合图表或条形图的参考线和刻度线位于条形图的左侧,并且不通过线的标记。这是与纯线图表不同的行为。x 轴标签在两个引擎中完全居中。

你可以在这里看到一个例子:http: //jsfiddle.net/yo3uta96/

问题:

我有一些非公开页面,其中包含显示雨、风、温度等的统计天气数据,这些数据在许多图表中表示,彼此下方。其中有些是折线图,有些是条形图,有些是组合图。这是一个动态创建的页面,用户可以在其中选择过去最多 365 天的日期范围。页面上的每个图表都有相同数量的数据点。当要显示的数据点超过 80 个时,条形图变成面积图,折线图变成没有标记的折线图。

我想要达到的目标:

我想让图表、数据点、指南和刻度与 x 轴标签一样排列。

我尝试了什么:

我设法通过将 offsetStart 和 offsetEnd 添加到仅行图表来排列数据点,这是必要的,因为在组合图表中,折线图的第一个标记放置在相应的第一个条的中心并且不再位于 y 轴上如折线图。最后一个标记也是如此。

不幸的是,添加偏移量并不能解决我的刻度和参考线对齐问题。我尝试了几乎所有可能的与指南、minorTicks、minorGuides 和偏移量的组合,但无济于事。在理想的世界和一些边缘情况下,每个 x 轴标签都显示在图表上,禁用参考线并将次要刻度设置为 1 可能会起作用。但是当增加数据点的数量时,这种方法会停止工作。

问题:

如何以 ZingCharts 处理似乎在图表之间完美对齐的 x 轴标签的相同方式在条形图和折线图中排列具有相同数量数据点的指南和刻度?

0 投票
1 回答
685 浏览

javascript - Zing 图表 - 如何在工具提示中添加更多信息?

我正在尝试 Zing Chart 并以这种方式拥有 JS 数组:

当悬停在特定点上时 - 我可以在工具提示中显示时间、值和系列,但是当用户悬停在散点图中的特定点上时,如何从同一个数组中显示 Parameter1、2、3?

谢谢。

0 投票
1 回答
141 浏览

javascript - 缩放 zingchart 条形图后,如何删除 X 轴下方的部分图形?

我正在使用 zingchart 条形图。但是在缩放图形的一部分后仍然保留在 X 轴下方。 如图所示

图表配置如下:

如何删除它?

0 投票
1 回答
506 浏览

javascript - ZingChart 条形空间不起作用

我正在使用以下数据渲染 zingchart:

我已经给了 bar-space 50px 仍然它的 bar 彼此靠近如下

我的图表

我想知道,如何在条形图中给出边距?

0 投票
1 回答
209 浏览

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

这是我正在尝试做的一个例子:http: //jsfiddle.net/4pb8uzt8/13/

我将 Zingchart (2.3.0) 与 AngularJs (1.4.7) 和 Ionic (1.1.0) 一起使用

到目前为止,我的应用程序中的所有图表都运行良好。但是当我尝试自定义条形填充时,我得到了一个奇怪的行为。条形图是不可见的,当鼠标悬停时会显示条形图。试图弄清楚它来自哪里,但没有发现任何奇怪的东西。

任何想法 ?我使用了与 JSFiddle 中显示的完全相同的 json,它实际上是复制粘贴。

透明条

在此处输入图像描述

谢谢你的时间。

更新

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

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

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

0 投票
1 回答
330 浏览

javascript - ZingChart - 如何在实时提要中附加值时保持缩放级别

我有一个从物联网平台获取数据的实时提要,每次接收到一个值并将其附加到绘图时,在这种情况下,每 15 秒绘图在更新时重置为其初始缩放级别。

有没有办法阻止图形缩小或记录缩放级别,以便在更新后重置?

设置实时供稿:

获取数据并附加到绘图: