[英]Highstock data not showing when setting xAxis min and max
我無法設置xAxis的最小值和最大值,而無需處理數據。 我嘗試使用plotOptions
和設置pointStart: Date.UTC(2016, 3, 1)
但這樣做與數據有關。 該系列影片最終出現在最右邊,無法正確加載。
是否可以設置最小值和最大值並使數據服從所設置的內容? 當我未設置min
和max
時,它將正確加載。 我需要它從2016年4月開始到2018年4月結束,每個月都有一個滴答。
小提琴: https : //jsfiddle.net/omaraziz/h5jsk7a3/5/
這是一個幾乎可以使用的版本,只需要xAxis日期和刻度(數據並不完全相同,但是json的設置完全相同:
數據來自JSON文件(data.json):
{
"(1)": [1,2,3,4,5],
"(2)": [6,7,8,9,0]
"(3)": [1,4,7,2,0]
}
設置選項:
var myChart = function() drawChart() {
$("#container").highcharts("StockChart", {
rangeSelector: {
enabled: false
},
xAxis: {
type: 'datetime',
tickInterval: (24 * 3600 * 1000) * 30, // every month
min: Date.UTC(2016, 3, 1),
max: Date.UTC(2018, 3, 4)
},
series: processedData, // from the data loaded below
});
};
加載JSON:
processedData = [];
$(function () {
$getJSON("data.json", function(data) {
for(let value in data) {
if(data.hasOwnProperty(value)) {
processedData.push({
name: value,
data: data[value],
})
}
myChart(); // after the data has loaded
});
});
如果您每小時記錄一次數據,希望使用以下兩行代碼可以解決您的問題:
pointStart:Date.UTC(2016, 3, 1),
pointInterval: 3600 * 1000
這是示例:
var myChart = function drawChart() { $("#container").highcharts("StockChart", { rangeSelector: { enabled: false, }, xAxis: { type: 'datetime', ordinal: false, min: Date.UTC(2016, 3, 1), max: Date.UTC(2018, 3, 4) }, plotOptions:{ series:{ pointStart:Date.UTC(2016, 3, 1), pointInterval: 3600 * 1000 } }, series: processedData, }); }; const processedData = []; $(function () { $.getJSON("https://omaraziz.me/CC-chart/new-activity.json", function (data) { for(let value in data) { if(data.hasOwnProperty(value)) { processedData.push({ //pointStart: Date.UTC(2016, 3, 1), name: value, data: data[value], }) } } myChart(); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.highcharts.com/stock/highstock.src.js"></script> <div id="container"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.