3

日付とスコアのデータセットがあり、月に 1 つのスコアがあり、次のようになります。

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 番目ごとのポイントのみを表示させるにはどうすればよいですか? （そして、これらの増分を簡単に切り替えます）

4

1 に答える 1

5

これは古い質問だと思いますが、まだ ZingChart を使用している場合、私の回答がお役に立てば幸いです。

setseriesdata api メソッドを呼び出して系列データを変更し、ユーザーが間隔を変更したときに必要なポイントのみを表示することで、これを実現できます。このデモでは、単純な 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 時間 (ミリ秒単位) を使用します。

デモのページ ソースを表示して、完全なコードを確認してください。

于 2014-05-27T20:59:44.437 に答える