如何在java脚本中表示highcharts的日期数组

How to represent date array in java script for highcharts

本文关键字：highcharts 日期 数组 表示 java 脚本      更新时间：2023-09-26

我想动态地表示数据包括highcharts上的日期(从数据库中获取)我怎么能做到这一点?假设这是我的静态数据

series: [{
       data: [[Date.parse('7/7/2017'),222],[Date.parse('9/9/2019'),333]],
       pointStart: Date.parse('7/7/2017'),
       pointInterval: 24 * 3600 * 1000 // one day
}]
});

如何在java脚本中动态创建这个数组([[Date.parse('7/7/2017')，222]，[Date.parse('9/9/2019')，333]])，以及如何将它传递给highcharts中的series元素。

给你，我根据你的数据为你准备了一张图表

var initialData = [{
    "name": "sales",    
     pointStart: Date.parse('7/7/2017'),
     pointInterval: 24 * 3600 * 1000, 
    tickInterval: 24 * 3600 * 1000,
    data: [[Date.parse('8/7/2017'),222],[Date.parse('9/7/2017'),333],[Date.parse('11/7/2017'),333]]}];
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'area',
    },
    xAxis: {
        type: 'datetime',
        tickmarkPlacement: 'on',
        showFirstLabel: true,
        showLastLabel: true,
        endOnTick: true,
       // second: '%H:%M:%S',
        dateTimeLabelFormats: {
        
            day: '%d. %b',
            month: '%b ''%y',
            year: '%Y'
        },
        labels: {
            formatter: function() {
                return Highcharts.dateFormat('%d %b %Y', this.value);
            }
        }
        //,tickInterval : null
    },
    yAxis: {
    },
   
    legend: {
        enabled: true
    },
    plotOptions: {
        area: {
            fillOpacity: .5,
            marker: {
                radius: 4
            },
            stacking: 'normal'
        }
    },
  
    series: initialData
});
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container" style="height: 400px"></div>

相关文章：