设置 xAxis 最小值和最大值时不显示 Highstock 数据

Posted 2023-05-08

【中文标题】设置 xAxis 最小值和最大值时不显示 Highstock 数据

【英文标题】：Highstock data not showing when setting xAxis min and max

【发布时间】：2019-05-02 06:17:33

【问题描述】：

如果不使用数据，我无法设置 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
   );
);

【问题讨论】：

您的数据x 值是多少？我的意思是你的每个系列都包含大约 11126 个值。它们是每小时值吗？

@pooyan 你的意思是来自 JSON 的那些？它们是我从一个大的 excel 文件中复制的数据。数据的格式与我在此处发布的 json 结构完全相同。数据范围从0到~800

是的，我的意思是来自 json 文件的数据。根据这些数据，您的每个系列将包含大约 11126 个值，您应该确定它们的xaxis。例如，您应该知道这些数据中的每一个都是每小时数据。

【参考方案1】：

如果您每小时都在记录数据，我希望您的问题可以通过使用这两行代码来解决：

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>

【讨论】：

太棒了，这很有帮助。只有一件事，我如何让它在 2018 年 3 月而不是 17 年 7 月结束？

我希望ordinal: false, 能解决问题。看看我的答案编辑的代码片段。

快速提问，是否可以拉伸数据以适应该范围？如果两年内不可能，那么也许一年？假设范围是一年（2017 年 7 月到 18 年 4 月）。

这取决于你的数据数量和tickInterval设置。