Próbuję wykreślić dwa wykresy liniowe na jednym wykresie ZingChart i staram się dowiedzieć, w jakim formacie powinienem przekazywać dane.
Zasadniczo mam tablicę datowników / par całkowitych dla dzisiejszych danych z tygodnia i tygodnia z przedziałami jednogodzinnymi np .:
today = [[timestamp1, 1], [timestamp2, 4], ......, [timestamp18, 7]] <- zakładając, że teraz jest godzina szósta, więc nie ma danych przez resztę dnia
week_ago = [[timestamp1, 4], [timestamp2, 7], ......, [timestamp23, 1]] <- pełne 24 godzinne dane
Seria x powinna pokazywać godziny od 00:00 do 23:00, a seria y jest po prostu liczbą całkowitą. Ponadto, na każdym punkcie wykresu, chcę przypisać etykietę, aby pokazać datę i wartość całkowitą.
Brzmi to bardzo prosto i prawdopodobnie jest, ale ponieważ jestem zupełnie nowy w ZingChart, nie mogę tego rozgryźć.
Wielkie dzięki
Odpowiedzi:
7 dla odpowiedzi № 1Czy to właśnie próbujesz zrobić? Użyłem dwóch series obiekty zawierają moje dane: pierwsza zawiera dane z serii czasowej na dziś, a druga zawiera dane dotyczące serii czasowych z zeszłego tygodnia. Więcej informacji na ten temat dane szeregów czasowych i skale w tym miejscu.
Następnie stworzyłem dwie skale osi x. scaleX jest związany z pierwszym obiektem serii (dzisiejsze dane), oraz scaleX2 jest związany z drugim obiektem serii (lub danymi z ostatniego tygodnia) "zmieszaj" obie skale, aby pojawiły się na tej samej linii osi (ale częściej dzieje się tak na osi Y). Możesz też wyłączyć widoczność drugiej osi X, co zrobiłem w poniższym demo.
Możesz oczywiście użyć podpowiedzi (wyłączone w tej wersji demo), celownikii / lub legenda w celu dalszego wyjaśnienia twoich danych.
var myConfig = {
type: "line",
utc: true, //If set to false, this will default to UTC time.
timezone: -5, //Currently set to EST time. You can specify your desired time zone.
scaleX: {
minValue: 1471496400000,
maxValue: 1471579200000,
step: "hour",
transform: {
type: "date",
all: "%g%a"
},
label: {
text: "X-Axis"
},
item: {
fontSize: 10
},
maxItems: 24
},
scaleX2: {
minValue: 1470891600000,
maxValue: 1470974400000,
placement: "default",
blended: true,
visible: false,
step: "hour",
transform: {
type: "date",
all: "%g%a"
},
item: {
fontSize: 10
},
},
scaleY: {
values: "0:10:1",
label: {
text: "Y-Axis"
},
item: {
fontSize: 10
},
guide: {
lineStyle: "solid"
}
},
plot: {
tooltip: {
visible: false
}
},
crosshairX: {
plotLabel: {
multiple: true
}
},
series: [
{ //Today, or 08/18/16 until 6am
scales: "scaleX, scaleY",
values: [
[1471496400000, 3], //08/18/16 at midnight, EST time
[1471500000000, 7], //1am
[1471503600000, 5], //2am
[1471507200000, 9], //3am
[1471510800000, 4], //4am
[1471514400000, 5], //5am
[1471518000000, 2] //6am
],
text: "Today"
},
{ //Last Thursday, or 08/11/16, all 24 hours
scales: "scaleX2, scaleY",
values: [
[1470891600000, 5], //08/11/16 at midnight, EST time
[1470895200000, 6], //1am
[1470898800000, 4], //2am
[1470902400000, 9], //3am
[1470906000000, 1], //4am
[1470909600000, 5], //5am
[1470913200000, 6], //6am
[1470916800000, 3], //7am
[1470920400000, 5], //8am
[1470924000000, 7], //9am
[1470927600000, 8], //10am
[1470931200000, 2], //11am
[1470934800000, 3], //12am
[1470938400000, 1], //1pm
[1470942000000, 4], //2pm
[1470945600000, 6], //3pm
[1470949200000, 7], //4pm
[1470952800000, 3], //5pm
[1470956400000, 5], //6pm
[1470960000000, 6], //7pm
[1470963600000, 2], //8pm
[1470967200000, 3], //9pm
[1470970800000, 5], //10pm
[1470974400000, 4] //11pm
],
text: "Last Week"
}
],
legend: {
align: "center",
verticalAlign: "bottom",
marker: {
type: "circle",
size: 4,
showLine: true
},
borderWidth: 1
}
};
zingchart.render({
id : "myChart",
data : myConfig,
height: 400,
width: 600
});<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"></div>
</body>Nadzieja, która pomaga. Jestem w zespole ZingChart i możesz dać mi znać, jeśli masz dalsze pytania. Zapoznanie się z naszą Samouczek skalowania powinien dać ci dobrą podstawę do pracy z naszą biblioteką.