2016-08-18 11 views
7

私は、1つのZingChartチャートに2つの折れ線グラフをプロットしようとしており、どのフォーマットでデータを渡すべきかを把握しようとしています。WeekOnWeekグラフを1つのZingChartグラフにプロットする方法は?

今日= [[timestamp1、1]、[timestamp2、4]、....:

基本的に、私は1時間間隔などのデータ前の今日のためのタイムスタンプ/整数のペアの配列と週を持っています.. [timestamp18、7]] < - それは午後6時だと仮定し、残りの日のデータはありません。

week_ago = [[timestamp1、4]、[timestamp2,7]、... ..、[timestamp23、1] < - 完全な24時間データ

xシリーズには00:00から23:00までの時間が表示され、yシリーズは整数にすぎません。また、グラフの各点に、日付と整数値を表示するツールチップが必要です。

私はZingChartにはかなり新しいので、それは分かりません。

どうもありがとう

答えて

7

は、あなたが何をしようとして、このですか? 2つのデータを使用してデータを格納しました。最初のデータには今日の時系列データが含まれ、2番目のデータには先週の時系列データが含まれています。 time-series data and scales hereについてさらに詳しい情報があります。

次に、two x-axis scalesを作成しました。 scaleXは最初のシリーズオブジェクト(今日のデータ)に関連付けられ、scaleX2は2番目のシリーズオブジェクト(または先週のデータ)に関連付けられます。 "blend" the two scales so that they appear on the same axis lineのオプションがあります(これは、通常、y軸で行われます)。または、次のデモで行った2番目のx軸の表示をオフにすることもできます。

tooltips(このデモではオフに設定)、crosshairs、および/またはlegendを使用して、データをさらに説明することはもちろん可能です。

var myConfig = { 
 
    type: 'line', 
 
    \t utc: true, //If set to false, this will default to UTC time. 
 
    \t timezone: -5, //Currently set to EST time. You can specify your desired time zone. 
 
    \t scaleX: { 
 
    \t minValue: 1471496400000, 
 
    \t maxValue: 1471579200000, 
 
    \t step: 'hour', 
 
    \t transform: { 
 
    \t  type: 'date', 
 
    \t  all: '%g%a' 
 
    \t }, 
 
    \t label: { 
 
    \t  text: 'X-Axis' 
 
    \t }, 
 
    \t item: { 
 
    \t  fontSize: 10 
 
    \t }, 
 
    \t maxItems: 24 
 
    \t }, 
 
    \t scaleX2: { 
 
    \t minValue: 1470891600000, 
 
    \t maxValue: 1470974400000, 
 
    \t placement: 'default', 
 
    \t blended: true, 
 
    \t visible: false, 
 
    \t step: 'hour', 
 
    \t transform: { 
 
    \t  type: 'date', 
 
    \t  all: '%g%a' 
 
    \t }, 
 
    \t item: { 
 
    \t  fontSize: 10 
 
    \t }, 
 
    \t }, 
 
    \t scaleY: { 
 
    \t values: '0:10:1', 
 
    \t label: { 
 
    \t  text: 'Y-Axis' 
 
    \t }, 
 
    \t item: { 
 
    \t  fontSize: 10 
 
    \t }, 
 
    \t guide: { 
 
    \t  lineStyle: 'solid' 
 
    \t } 
 
    \t }, 
 
    \t plot: { 
 
    \t tooltip: { 
 
    \t  visible: false 
 
    \t } 
 
    \t }, 
 
    \t crosshairX: { 
 
    \t plotLabel: { 
 
    \t  multiple: true 
 
    \t } 
 
    \t }, 
 
\t series: [ 
 
\t \t { //Today, or 08/18/16 until 6am 
 
\t \t scales: 'scaleX, scaleY', 
 
\t \t values: [ 
 
\t \t  [1471496400000, 3], //08/18/16 at midnight, EST time 
 
\t \t  [1471500000000, 7], //1am 
 
\t \t  [1471503600000, 5], //2am 
 
\t \t  [1471507200000, 9], //3am 
 
\t \t  [1471510800000, 4], //4am 
 
\t \t  [1471514400000, 5], //5am 
 
\t \t  [1471518000000, 2] //6am 
 
\t \t ], 
 
\t \t text: 'Today' 
 
\t \t }, 
 
\t \t { //Last Thursday, or 08/11/16, all 24 hours 
 
\t \t scales: 'scaleX2, scaleY', 
 
\t \t values: [ 
 
\t \t  [1470891600000, 5], //08/11/16 at midnight, EST time 
 
\t \t  [1470895200000, 6], //1am 
 
\t \t  [1470898800000, 4], //2am 
 
\t \t  [1470902400000, 9], //3am 
 
\t \t  [1470906000000, 1], //4am 
 
\t \t  [1470909600000, 5], //5am 
 
\t \t  [1470913200000, 6], //6am 
 
\t \t  [1470916800000, 3], //7am 
 
\t \t  [1470920400000, 5], //8am 
 
\t \t  [1470924000000, 7], //9am 
 
\t \t  [1470927600000, 8], //10am 
 
\t \t  [1470931200000, 2], //11am 
 
\t \t  [1470934800000, 3], //12am 
 
\t \t  [1470938400000, 1], //1pm 
 
\t \t  [1470942000000, 4], //2pm 
 
\t \t  [1470945600000, 6], //3pm 
 
\t \t  [1470949200000, 7], //4pm 
 
\t \t  [1470952800000, 3], //5pm 
 
\t \t  [1470956400000, 5], //6pm 
 
\t \t  [1470960000000, 6], //7pm 
 
\t \t  [1470963600000, 2], //8pm 
 
\t \t  [1470967200000, 3], //9pm 
 
\t \t  [1470970800000, 5], //10pm 
 
\t \t  [1470974400000, 4] //11pm 
 
\t \t ], 
 
\t \t text: 'Last Week' 
 
\t \t } 
 
\t ], 
 
\t legend: { 
 
\t align: 'center', 
 
\t verticalAlign: 'bottom', 
 
\t marker: { 
 
\t  type: 'circle', 
 
\t  size: 4, 
 
\t  showLine: true 
 
\t }, 
 
\t borderWidth: 1 
 
\t } 
 
}; 
 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 400, 
 
\t width: 600 
 
});
<head> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body>

お役に立てば幸いです。私はZingChartチームにいます。さらなる質問があれば教えてください。 Scales Tutorialをよく知っていると、私たちの図書館で働く良い基礎が得られます。

関連する問題