[英]Highstock data not showing when setting xAxis min and max
I'm not able to set the xAxis min and max without screwing with the data. 我无法设置xAxis的最小值和最大值,而无需处理数据。 I tried using
plotOptions
and setting pointStart: Date.UTC(2016, 3, 1)
but doing that screws with the data. 我尝试使用
plotOptions
和设置pointStart: Date.UTC(2016, 3, 1)
但这样做与数据有关。 The series ends up on the far right and doesn't load properly. 该系列影片最终出现在最右边,无法正确加载。
Is it possible to set a min and a max and make the data obey whatever is set? 是否可以设置最小值和最大值并使数据服从所设置的内容? It loads properly when I don't set
min
and max
. 当我未设置
min
和max
时,它将正确加载。 I need it to start in April 2016 and end on April 2018 with a tick every month. 我需要它从2016年4月开始到2018年4月结束,每个月都有一个滴答。
Fiddle: https://jsfiddle.net/omaraziz/h5jsk7a3/5/ 小提琴: https : //jsfiddle.net/omaraziz/h5jsk7a3/5/
Here is an almost working version that just needs the xAxis dates and the tick (data is not exactly the same, but the same exact setting of the json: 这是一个几乎可以使用的版本,只需要xAxis日期和刻度(数据并不完全相同,但是json的设置完全相同:
The data is coming from a JSON file (data.json): 数据来自JSON文件(data.json):
{
"(1)": [1,2,3,4,5],
"(2)": [6,7,8,9,0]
"(3)": [1,4,7,2,0]
}
Setting the options: 设置选项:
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
});
};
Loading JSON: 加载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
});
});
If Your are recording your data at each hour, I hope your problem would be solved by using these two lines of code: 如果您每小时记录一次数据,希望使用以下两行代码可以解决您的问题:
pointStart:Date.UTC(2016, 3, 1),
pointInterval: 3600 * 1000
Here is example: 这是示例:
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.