Question

我没有在我的图表上看到任何数据：使用Laz_highcharts

的Highcharts

 @chart = LazyHighCharts::HighChart.new('graph') do |f|
 f.title(:text => 'Rate')
 f.xAxis(:type => 'datetime',
        :title => {
          text: 'Day'
        })
 f.yAxis(:title => {
          text: 'Price'
        })
 f.series(:name => 'Price',
         :data => Rate.usdzar
                    .map { |i| [i.day.to_time.to_i,
                                i.price] })

   f.chart({:defaultSeriesType => 'line'})
   end

当我查看html时，我看到了数据，但它没有在页面上显示任何帮助都非常充分

数据格式：

    (function() {

      var onload = window.onload;
      window.onload = function(){
        if (typeof onload == "function") onload();
                var options = { "title": { "text": "Rate" },"legend": 
{ "layout": "vertical","style": {  } },"xAxis": { "type": 
"datetime","title": { "text": "Day" } },"yAxis": { "title": { "text": 
"Price" } },"tooltip": { "enabled": true },"credits": { "enabled": 
false },"plotOptions": { "areaspline": {  } },"chart": { 
"defaultSeriesType": "line","renderTo": "my_id" },"subtitle": {  
},"series": [{ "name": "Price","data": [ [ 1449007200,"14.31" ],[ 
1449093600,"14.25" ],[ 1450044000,"15.02" ],[ 1450130400,"14.86" ],[ 
1449180000,"14.27" ],[ 1449439200,"14.32" ],[ 1449525600,"14.49" ],[ 
1449612000,"14.52" ],[ 1449698400,"14.85" ],[ 1449784800,"15.36" ],[ 
1450303200,"14.85" ],[ 1450389600,"14.98" ],[ 1450648800,"14.93" ],[ 
1450735200,"15.04" ],[  1459202400,"15.37" ],[ 1459288800,"14.81" ],[ 
1459375200,"14.65" ],[ 1475100000,"13.59" ],[ 1475186400,"13.59" ],[ 
1475445600,"13.55" ],[ 1475532000,"13.59" ],[ 1475618400,"13.69" ],[ 
1475704800,"13.72" ],[ 1479852000,"14.01" ],[ 1479938400,"14.08" ],[ 
1480024800,"14.03" ],[ 1480284000,"13.79" ],[ 1480370400,"13.69" ],[ 
1480456800,"13.7" ],[  ] ] }] };`

    window.chart_my_id = new Highcharts.Chart(options);

      };
            })()

感谢迄今为止提供的帮助

最新的控制器：完美地查看数据但日期格式显示不正确。数据问题由to_f在价格上修正，并将DollarChills建议添加到单独的x和y轴。 UTC日期在某种程度上无法从我的数据中读取，该数据存储为＆＃34; 2017-09-21＆＃34;。

@u = Rate.usdzar.last(60)
@rd = Rate.select(:day).order(:id).last(60)
x_axis_start = @rd.first.day


@h = LazyHighCharts::HighChart.new('graph') do |f|
f.title(:text => 'Rates')
f.xAxis(:type => 'datetime', :day => @rd.map { |i| i.day.to_datetime.to_i }, :title => { text: 'Days' }, pointStart: x_axis_start.to_datetime.to_i)
f.yAxis(:title => { text: 'Price' })
f.series(:name => 'Price', :data => @u.map { |i| i.price.to_f })
f.chart({:defaultSeriesType => 'line'})

结束

to_time.to_i * 1000，我试过但结果相同实际来源以毫秒为单位显示它，但仍然将X轴上的第一个显示为1-Jan，休息时间为00:00:00 010 - 00:00:00 050

代码运行是：

@u = Rate.usdzar.last(60)
@rd = Rate.select(:day).order(:id).last(60)
x_axis_start = @rd.first.day


@h = LazyHighCharts::HighChart.new('graph') do |f|
  f.title(:text => 'Rates')
  f.xAxis(:type => 'datetime', :day => @rd.map { |i| i.day.to_time.to_i * 1000 }, :title => { text: 'Days' }, pointStart: x_axis_start.to_time.to_i * 1000)
  f.yAxis(:title => { text: 'Price' })
  f.series(:name => 'Price', :data => @u.map { |i| i.price.to_f })
  f.chart({:defaultSeriesType => 'line'})
end

页面来源：

    (function() {

      var onload = window.onload;
      window.onload = function(){
        if (typeof onload == "function") onload();
                var options = { "title": { "text": "Rates" },"legend": { "layout": "vertical","style": {  } },"xAxis": { "type": "datetime","day": [ 1504648800000,1504648800000,1504648800000,1504648800000,1504648800000,1504735200000,1504735200000,1504735200000,1504735200000,1504735200000,1504821600000,1504821600000,1504821600000,1504821600000,1504821600000,1505167200000,1505167200000,1505167200000,1505167200000,1505167200000,1505253600000,1505253600000,1505253600000,1505253600000,1505253600000,1505340000000,1505340000000,1505340000000,1505340000000,1505340000000,1505426400000,1505426400000,1505426400000,1505426400000,1505426400000,1505685600000,1505685600000,1505685600000,1505685600000,1505685600000,1505772000000,1505772000000,1505772000000,1505772000000,1505772000000,1505858400000,1505858400000,1505858400000,1505858400000,1505858400000,1505944800000,1505944800000,1505944800000,1505944800000,1505944800000,1506031200000,1506031200000,1506031200000,1506031200000,1506031200000 ],"title": { "text": "Days" },"pointStart": Date.UTC(4.748310497088e+19, 3.9000496896e+18, 1.3000165632e+17) },"yAxis": { "title": { "text": "Price" } },"tooltip": { "enabled": true },"credits": { "enabled": false },"plotOptions": { "areaspline": {  } },"chart": { "defaultSeriesType": "line","renderTo": "my_id" },"subtitle": {  },"series": [{ "name": "Price","data": [ 12.82,12.8,12.93,12.87,12.99,13.15,13.15,13.35,13.31,13.28,13.44,13.25,13.14,12.99,12.92,12.88,12.89,12.93,12.87,12.88,12.92,13.02,12.86,12.99,12.97,12.97,13.23,13.2,13.3,13.11,13.31,13.42,13.32,13.28,13.19,13.12,13.19,13.16,13.13,13.19,13.15,13.02,13.01,12.94,12.97,12.99,12.85,12.94,12.82,12.77,12.75,12.87,12.97,13.1,13.11,13.13,13.26,13.22,13.25,13.16 ] }] };

    window.chart_my_id = new Highcharts.Chart(options);

      };
            })()

问题：

<%= high_chart("my_id", @h) %>

这看起来是正确的，但显然仍然是漂泊的东西谢谢你的回复，仍然不知所措。

Answer 1

也许试试这个。将日期移动到x轴。我认为这不是绘图，因为没有给出x轴。

@chart = LazyHighCharts::HighChart.new('graph') do |f|
 f.title(:text => 'Rate')
 f.xAxis(:type => 'datetime', :categories => Rate.usdzar.map { |i| i.day.to_time.to_i}, :title => { text: 'Day' })
 f.yAxis(:title => { text: 'Price' })
 f.series(:name => 'Price', :data => Rate.usdzar.map { |i| i.price })
 f.chart({:defaultSeriesType => 'line'})
end

Answer 2

我最终让那些对最终代码感兴趣的人工作：

控制器

<body>
  <div class="topnav" id="myTopnav">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#portfolio">Portfolio</a>
    <a href="#contact">Contact</a>
    <a class="icon" onclick="myFunction()">&#9776;</a>
  </div>

  <div class="jumbotron">
  </div>
</body>

ERB：

@ih = LazyHighCharts::HighChart.new('graph') do |f|
  f.title(:text => 'Rates-USDZAR')
  f.xAxis(:type => 'datetime', :title => { text: 'Days' })
  f.yAxis(:title => {text: 'Price'})
  f.series(:name => 'USDZAR', :data => Rate.usdzar.last(60).map { |i| 
  [i.day.to_time.to_i * 1000, i.price.to_f ] })
  f.chart({:defaultSeriesType => 'line'})
end

@chart_globals = LazyHighCharts::HighChartGlobals.new do |f|
  f.global(useUTC: false)
  f.chart(backgroundColor: {linearGradient: [0, 0, 500, 500],stops:
  [[0, "rgb(255, 255, 255)"],[1, "rgb(240, 240, 255)"]]},
  borderWidth: 2,
  plotBackgroundColor: "rgba(255, 255, 255, .9)",
  plotShadow: true,
  plotBorderWidth: 1)
  f.lang(thousandsSep: ",")
  f.colors(["#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354"])
end

感谢所有的输入：必须说我认为做这个原始的高级图表会更好但我仍然有问题映射..但它的工作原理。我也有Chartkick工作，但更喜欢LHCharts，对我来说似乎更容易理解。

Rails：Lazy_high_charts映射问题

2 个答案: