将日期标签添加到HighCharts折线图中

用户名

我正在尝试创建一个折线图,其中包括沿x轴的日期。我的图看起来像这样。在此处输入图片说明

数据数组如下所示: [[1376092800000,1],[1379376000000,2],[1380585600000,3],[1383350400000,4],[1383350400000,5],[1383350400000,6],[1383350400000,7],[1383350400000,8],[1385942400000,9],[1385942400000,10],[1385942400000,11],[1385942400000,12],[1388620800000,13],[1388620800000,14],[1388620800000,15],[1388620800000,16],[1391212800000,17],[1393632000000,18],[1401580800000,19],[1401580800000,20],[1401580800000,21],[1404172800000,22],[1404172800000,23]]

数组中的第一个值应该在(August 2013,1)处绘制一个点;但是,它是在1月1日绘制第一个点。我想将我的数据与数组中的值进行匹配。我还希望x轴显示月份后跟年份。我尝试添加

labels: {
    formatter: function () {
        return Highcharts.dateFormat('%m %y', this.value);
    }
}

但这只是将x轴更改为 在此处输入图片说明

任何建议将不胜感激。谢谢!

编辑

我认为问题与我访问数据的方式有关。我正在调用具有日期值的XML文件。这是一个工作图jsfiddle,但数据是硬编码的。我想要一种将数据传递到页面中的方法。

我的密码

//Open the XML file
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "https://atlanticresearchgroupinc.quickbase.com/db/bi6vng8r5?a=API_DoQuery&clist=a", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;

var record = xmlDoc.getElementsByTagName("record");
var x = 0;
var y = 0;
var dataset = [];

//Create dataset
for (var i = 0; i < record.length; i++) {
    x = record[i].getElementsByTagName("date_of_consent")[0].childNodes[0].nodeValue;
    y = y + 1;
    var newArray = [x, y];
    dataset.push(newArray);
}

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Enrollment Over Time',
            x: -20 //center
        },
        xAxis: {
            title: {
                text: 'Date of Enrollment'
            },
            type: 'datetime'
        },
        yAxis: {
            title: {
                text: 'Number of Patients'
            },
            min: 0,
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%e. %b}: {point.y:.2f} Patients'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Actual Enrollment',
            data: dataset
        }]
    });
});
哈尔沃斯·霍尔斯坦·斯特兰德

查看您的示例数据数组,它是正确的,如本JSFiddle中的示例所示

问题(您可能已经发现)是从XML获取它略有不同。在您的代码中,for循环中包含以下行

x = record[i].getElementsByTagName("date_of_consent")[0].childNodes[0].nodeValue;

这里的问题是JavaScript(和Highcharts)不知道您打算将其作为整数。它以字符串形式获取。并且在Highcharts中无法将字符串作为时间戳插入数据数组中。

您将必须将此x解析为整数,然后将其推入数组,例如:

x = parseInt(record[i].getElementsByTagName("date_of_consent")[0].childNodes[0].nodeValue);

这应该使Highcharts将其视为时间戳,并在x轴上显示正确的日期。当它得到字符串时,它只是将数据视为具有从0、1、2 ...递增的x值。

希望这能解决您的问题。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用Chart.js将点击事件添加到我的折线图中

来自分类Dev

使用chart.js将数据添加到折线图

来自分类Dev

似乎无法弄清楚如何使用HoloGraphLibrary动态地将点添加到折线图中。

来自分类Dev

在d3中将轴添加到动态折线图中

来自分类Dev

使用Highcharts将动态数据从mysql数据库添加到折线图

来自分类Dev

matplotlib将图例从csv标题行添加到折线图

来自分类Dev

将时间缩放比例添加到折线图(Chart.js)

来自分类Dev

如何将圆添加到折线图路径d3.js

来自分类Dev

使用ggplot将图例添加到单个折线图中

来自分类Dev

将HTML添加到Google折线图工具提示

来自分类Dev

使用Python PPTX将数据表添加到折线图中

来自分类Dev

使用ggplot2将标签添加到折线图中

来自分类Dev

将网格添加到D3.js折线图

来自分类Dev

将时间戳记格式添加到折线图x轴

来自分类Dev

似乎无法弄清楚如何使用HoloGraphLibrary动态地将点添加到折线图中。

来自分类Dev

在d3中将轴添加到动态折线图中

来自分类Dev

Google图表将标记添加到折线图功能

来自分类Dev

将“事件”添加到时间序列折线图(垂直折线或xy散点图)

来自分类Dev

如何将类添加到折线图中的每一行

来自分类Dev

D3将点添加到多个堆积的折线图中

来自分类Dev

Google折线图将悬停标题添加到X值

来自分类Dev

Power BI可以将范围选择添加到折线图吗?

来自分类Dev

matplotlib将图例从csv标题行添加到折线图

来自分类Dev

将时间缩放比例添加到折线图(Chart.js)

来自分类Dev

如何使用ggplot将阴影区域添加到具有多条线的折线图中?

来自分类Dev

如何将 RGBA 颜色添加到谷歌折线图?

来自分类Dev

将 SVG 线元素添加到折线图

来自分类Dev

将误差线添加到 R 中的折线图

来自分类Dev

使用多行动态将数据添加到折线图js

Related 相关文章

  1. 1

    如何使用Chart.js将点击事件添加到我的折线图中

  2. 2

    使用chart.js将数据添加到折线图

  3. 3

    似乎无法弄清楚如何使用HoloGraphLibrary动态地将点添加到折线图中。

  4. 4

    在d3中将轴添加到动态折线图中

  5. 5

    使用Highcharts将动态数据从mysql数据库添加到折线图

  6. 6

    matplotlib将图例从csv标题行添加到折线图

  7. 7

    将时间缩放比例添加到折线图(Chart.js)

  8. 8

    如何将圆添加到折线图路径d3.js

  9. 9

    使用ggplot将图例添加到单个折线图中

  10. 10

    将HTML添加到Google折线图工具提示

  11. 11

    使用Python PPTX将数据表添加到折线图中

  12. 12

    使用ggplot2将标签添加到折线图中

  13. 13

    将网格添加到D3.js折线图

  14. 14

    将时间戳记格式添加到折线图x轴

  15. 15

    似乎无法弄清楚如何使用HoloGraphLibrary动态地将点添加到折线图中。

  16. 16

    在d3中将轴添加到动态折线图中

  17. 17

    Google图表将标记添加到折线图功能

  18. 18

    将“事件”添加到时间序列折线图(垂直折线或xy散点图)

  19. 19

    如何将类添加到折线图中的每一行

  20. 20

    D3将点添加到多个堆积的折线图中

  21. 21

    Google折线图将悬停标题添加到X值

  22. 22

    Power BI可以将范围选择添加到折线图吗?

  23. 23

    matplotlib将图例从csv标题行添加到折线图

  24. 24

    将时间缩放比例添加到折线图(Chart.js)

  25. 25

    如何使用ggplot将阴影区域添加到具有多条线的折线图中?

  26. 26

    如何将 RGBA 颜色添加到谷歌折线图?

  27. 27

    将 SVG 线元素添加到折线图

  28. 28

    将误差线添加到 R 中的折线图

  29. 29

    使用多行动态将数据添加到折线图js

热门标签

归档