如何使用HighCharts在xAxis上列出日期（每天） [英] How to list dates (day-by-day) on xAxis using HighCharts

问题描述

我试图使用HighCharts沿xAxis显示日期（即按天）。我使用 Lazy High Charts gem w / Rails来做到这一点。对于HighCharts的'数据'参数，我传入一个嵌套数组，包括[[日期，收入]，[日期，收入]，[日期，收入] ...等]。

收入yAxis工作正常，但xAxis中的相应日期不正确。

以下是控制器代码：

  def graph_orders 
 
 sales_and_date_array = [] 
 
 Order.revenue_to_array（sales_and_date_array）
 
放置sales_and_date_array.inspect 
 
＃http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/ highcharts / series / data-array-of-datetime / 
 
 @chart = LazyHighCharts :: HighChart.new（'graph'）do | f | 
 f.title（：text =>Lono Sales）
 f.xAxis（
类型：'datetime'
）
 
 f。系列（：名称=>Lono销售收入，：yAxis => 0，：data => sales_and_date_array）
 
 f.yAxis [
 {：title => {：text => 收入，：保证金=> 70}}，
 {：title => {：text => Revenue}，：opposite => true：b 
 
 $ b f.legend（：align =>'right'，：verticalAlign =>'top'，：y => 75，：x => -50，：layout =>'vertical'，）
 f.chart（{：defaultSeriesType =>line}）
 end 
 
 end 
  

以下是inpsecting'sales_and_date_array'的样子：

  [[2014-06-12，208.28]，[2014-06-11，416.56]，[2014-06-11，624.84]，[2014-06 -11，833.12]，[2014-06-10，1041.4]，[2014-06-09，1249.68]，[2014-06-08，1457.96]，[2014-06-08 ，1666.24]，[2014-06-07，1874.52]，[2014-06-07，2082.8]，[2014-06-07，2291.08]等.... 
  

以下是图形输出目前的样子：

< img src =https://i.stack.imgur.com/NnADH.pngalt =在这里输入图片描述>

有什么想法？

解决方案

Highcharts不接受该格式的日期。
您可以传递Date.UTC对象，也可以以javascript时代格式传递日期（以毫秒为单位）。

引用：

• http：// www。 epochconverter.com/




• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC




• highcharts js库接受日期的格式是什么？

I'm trying to display dates (i.e., by day) along the xAxis using HighCharts. I'm using the Lazy High Charts gem w/ Rails to do so. For the HighCharts 'data' argument, I'm passing in a nested array with [[date, revenue], [date, revenue], [date, revenue]...etc].

The yAxis with the revenue is working correctly, but the corresponding date in the xAxis is not.

Here's the controllers code :

def graph_orders

        sales_and_date_array = []

        Order.revenue_to_array(sales_and_date_array)

        puts sales_and_date_array.inspect

        # http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/series/data-array-of-arrays-datetime/

        @chart = LazyHighCharts::HighChart.new('graph') do |f|
          f.title(:text => "Lono Sales")
          f.xAxis(
            type: 'datetime'
           )

          f.series(:name => "Lono Sales Revenue", :yAxis => 0, :data => sales_and_date_array)

          f.yAxis [
            {:title => {:text => "Revenue", :margin => 70} },
            {:title => {:text => "Revenue"}, :opposite => true},
          ]

          f.legend(:align => 'right', :verticalAlign => 'top', :y => 75, :x => -50, :layout => 'vertical',)
          f.chart({:defaultSeriesType=>"line"})
        end

    end

Here's what inpsecting 'sales_and_date_array' looks like:

[["2014-06-12", 208.28], ["2014-06-11", 416.56], ["2014-06-11", 624.84], ["2014-06-11", 833.12], ["2014-06-10", 1041.4], ["2014-06-09", 1249.68], ["2014-06-08", 1457.96], ["2014-06-08", 1666.24], ["2014-06-07", 1874.52], ["2014-06-07", 2082.8], ["2014-06-07", 2291.08],....etc

Here's what the graph output currently looks like:

Any thoughts?

解决方案

Highcharts does not accept dates in that format. You can either pass a Date.UTC object, or you can pass the date in javascript epoch format (in milliseconds).

references:

• http://www.epochconverter.com/

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC

• What format does the highcharts js library accept for dates?

这篇关于如何使用HighCharts在xAxis上列出日期（每天）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！