如何在每月/每季度/每半年增量之间切换我的 ZingChart？答案

【问题标题】：How can I toggle my ZingChart between monthly/quarterly/semi-annual increments?如何在每月/每季度/每半年增量之间切换我的 ZingChart？
【发布时间】：2013-12-31 08:57:42
【问题描述】：

我有一个日期和分数数据集，每个月一个分数，看起来像这样：

Date        Score
...
11/16/2012  14.30
12/14/2012  14.40
01/25/2013  12.10
02/22/2013  12.30
03/22/2013  16.10
04/26/2013  13.60
05/24/2013  16.80
06/21/2013  16.50
07/26/2013  16.20
08/23/2013  16.00
09/27/2013  13.60
10/25/2013  12.60
11/29/2013  8.00

我正在使用 ZingChart 在折线图上显示这些数据。我正在尝试为用户提供完整的自定义功能，包括将数据从每月（默认）更改为每季度或每半年的能力。如，如果用户选择“季度”，它应该只显示每 3 个月（向后移动 - 所以它会显示 11/29、8/23、5/24 等的数据......）。

如何让 ZingChart 仅显示每第 n 个点？（并在这些增量之间轻松切换）

【问题讨论】：

标签： jquery coldfusion charts zingchart

【解决方案1】：

我知道这是一个较老的问题，但如果您仍在使用 ZingChart，希望我的回答对您有所帮助。

您可以通过调用 setseriesdata api 方法来修改系列数据以仅在用户更改间隔时显示您想要的点来完成此操作。在this demo 中，我实现了一个简单的HTML <select> 元素来创建一个下拉菜单。

<select id="interval">
<option value=1>Monthly</option>
<option value=2>Quarterly</option>
<option value=3>Semi-Annually</option>
</select>

我使用 JQuery .change() 事件监听下拉菜单中的变化，并根据选择的选项更改系列数据。

$('#interval').change(function(){
var select = document.getElementById("interval");
var selVal = select.options[select.selectedIndex].value;
if(selVal==1){
    zingchart.exec("zc", "setseriesdata", {
        "plotindex":0,
        "data":{
        "values":[[1353024000000,14.3],[1355443200000,14.4],[1359072000000,12.1],[1361491200000,12.3],[1363910400000,16.1],[1366934400000,13.6],[1369353600000,16.8],[1371772800000,16.5],[1374796800000,16.2],[1377216000000,16.0],[1380240000000,13.6],[1382659200000,12.6],[1385683200000,8.0]]
        }
    });
}
else if(selVal==2){
//setseriesdata API call with quarter data here
}
else if(selVal==3){
//setseriesdata API call with semi-annual data here
}
});

还有一些事情：

您可以使用“scale-x”对象中的“mirrored”布尔属性沿该比例反转数据。

ZingChart 使用 Unix 时间（以毫秒为单位）作为时间/日期系列。

请务必查看演示的页面源以查看完整代码。

【讨论】：