高图表(高库存）:从外部 CSV 获取数据，无法正确显示日期

Highcharts (Highstock): Get data from external CSV, doesn't display date correctly

本文关键字：日期 显示 数据 获取 高库存 CSV 从外部 高图表      更新时间：2023-09-26

我已经尝试了好几天，让Highstock使用外部CSV文件。问题首先是导入的文件按"降序"排序，而Highcharts要求数据按"升序"顺序排序。一旦我找到一个接近我问题的JSFiddle/Codepen，我就设法正确显示数据。现在的问题是，在 x 轴上，日期显示为类似 00:00:00.500 而它应该看起来像这样2016-03-11。

我创建了一个代码笔，因为您可能比在此处复制/粘贴大量代码更容易响应它：http://codepen.io/bauhausweb/pen/aNpbxg

感谢您调查我的问题！

对于您的示例，似乎至少存在2016-03-11只是一个字符串而不是以毫秒为单位的时间戳的问题，这导致它选择了默认值 0、1、2、...改为 X 值。

下面我提供了一个示例，说明如何在 complete 函数的帮助下，使用 csv 属性的数据模块来实现类似的结果：

$(function () {
    $.get("https://www.example.com/my.csv", function (csv) {
        $('#container').highcharts('StockChart', {
            data: {
                complete: function(o) {
                    o.series[0].data.reverse();
                },
                csv: csv
            }
        });
    });
});

或者看看这个JSFiddle演示。

尝试做这样的事情：

 $.each(lines, function (lineNo, line) {
      if (lineNo > 0 && lineNo < 557) {
        var items = line.split(',');
        // var seriesname = String(items[0]); // this is the area name
        var seriesname = "Gold"; // this is the area name
        var price = parseFloat(items[1]);
        var f_date =  items[0];
        var format = String(f_date.replace(/-/g,','));
        var date_items = format.split(',');
        var d = Date.UTC(date_items[0],date_items[1],date_items[2]);
        console.log(d); 
        var date = d;
        // this will be the id of the drilldown
        // var shift_one_value = parseFloat(items[3]); // drilldown shift1 value
        // var shift_two_value = parseFloat(items[4]); // drilldown shift2 value
        series.data.push({ 
          name: seriesname,
          y: price,
          x: date
        });
      }

    });

问题是它将被格式化为 UTC 的日期

你的代码有很多奇怪的地方。您的xAxis设置为日期时间，这很好。点间隔为一天 - 也很好。但是，如果您查看series.data则发送的数据格式如下：

{
    name: "Gold",
    x: "1233.6",
    y: 1233.6
}

您在此处设置y：

var date = String(items[1]);

您应该使用 items[0] .现在，您还必须将此字符串解析为 JavaScript 时间。这样的事情可以工作：

var arr = String(items[0]).split("-");
var date = Date.UTC(arr[0], arr[1], arr[2]);

但是，现在您的图表会抛出日期未排序的错误。在此处查看更新的笔。

相关文章：