2017-03-15 31 views
0

我在面積圖上繪製了2條線,但由於某些原因,它們繪製的點在重疊時具有非常不同的值。 4 != 425Google Chart錯誤地將數據繪製爲重疊

enter image description here

的文檔列出vAxis.scaleType默認爲空,唯一的選擇是logScale。我已經設置了scaleType: nillogScale: false只是爲了確保它知道使用什麼規模。

這裏是從pry傳遞給圖表的數據,它精確到數據庫中的數據。

[{:name=>"Twitter", 
    :data=> 
    [[Tue, 07 Mar 2017 15:57:43 UTC +00:00, 422], 
    [Mon, 06 Mar 2017 15:57:43 UTC +00:00, 420], 
    [Sun, 05 Mar 2017 15:57:43 UTC +00:00, 419]]}, 
{:name=>"YouTube", 
    :data=> 
    [[Sun, 19 Feb 2017 15:57:43 UTC +00:00, 4], 
    [Sun, 05 Mar 2017 15:57:43 UTC +00:00, 4], 
    [Tue, 14 Feb 2017 15:57:43 UTC +00:00, 4], 
    [Tue, 21 Feb 2017 15:57:43 UTC +00:00, 4], 
    [Sat, 18 Feb 2017 15:57:43 UTC +00:00, 4], 
    [Mon, 27 Feb 2017 15:57:43 UTC +00:00, 4], 
    [Fri, 17 Feb 2017 15:57:43 UTC +00:00, 4], 
    [Mon, 06 Mar 2017 15:57:43 UTC +00:00, 4], 
    [Sun, 26 Feb 2017 15:57:43 UTC +00:00, 4], 
    [Sat, 04 Mar 2017 15:57:43 UTC +00:00, 4], 
    [Fri, 03 Mar 2017 15:57:43 UTC +00:00, 4], 
    [Tue, 07 Mar 2017 15:57:43 UTC +00:00, 4], 
    [Fri, 24 Feb 2017 15:57:43 UTC +00:00, 4], 
    [Thu, 02 Mar 2017 15:57:43 UTC +00:00, 4], 
    [Thu, 16 Feb 2017 15:57:43 UTC +00:00, 4], 
    [Sat, 25 Feb 2017 15:57:43 UTC +00:00, 4], 
    [Thu, 23 Feb 2017 15:57:43 UTC +00:00, 4], 
    [Wed, 01 Mar 2017 15:57:43 UTC +00:00, 4], 
    [Wed, 22 Feb 2017 15:57:43 UTC +00:00, 4], 
    [Mon, 20 Feb 2017 15:57:43 UTC +00:00, 4], 
    [Tue, 28 Feb 2017 15:57:43 UTC +00:00, 4], 
    [Wed, 15 Feb 2017 15:57:43 UTC +00:00, 4]]}] 

這裏是如何將數據傳遞到Chartkick:

@chart_data = [] 

@user_integs.each do |cred_id, integ_name|  
    data_hash = 
    { 
     name: integ_name, 
     data: IntegrationStatistic.where(credential_id: cred_id) 
     .where('created_at >= ?', @date_range) 
     .pluck(:created_at, @metric_type) 
    } 
@chart_data.push data_hash 
respond_to do |format| 
    format.js 
    format.json { render json: @chart_data } 
end 

這裏是我的選擇:

default_options = { 
     colors: ['#00aced', '#d2080e'], 
     library: { 
     width: '100%', 
     chartArea: { 
      top: '45', 
      right: '40', 
      bottom: '40', 
      left: '80' 
     }, 
     animation: { 
      startup: true, 
      duration: 1500, 
      easing: 'out' 
     }, 
     backgroundColor: '#2a2a2a', 
     fontName: 'Calibri', 
     curveType: 'function', 
     vAxis: { 
      scaleType: nil, 
      logScale: false, 
      gridlines:{ 
      color: '#333333' 
      }, 
      textStyle: { 
      color: '#a0a0a0' 
      } 
     }, 
     hAxis: { 
      format: 'MMM d', 
      baselineColor: '#000000', 
      textStyle: { 
      color: '#a0a0a0' 
      } 
     }, 
     axisTitlesPosition: 'none', 
     legend: { 
      position: 'top', 
      alignment: 'center', 
      textStyle: { 
      color: '#a0a0a0', 
      fontSize: 14, 
      bold: true 
      } 
     }, 
     lineWidth: 3, 
     pointSize: 7, 
     crosshair: { 
      trigger: 'both', 
      opacity: 0.2 
     }, 
     dataOpacity: 0.7, 
     tooltip: { 
      textStyle: { 
      color: '#2a2a2a' 
      } 
     } 
     } 
    } 

回答

1

面積圖默認情況下,與Chartkick堆疊。如果不需要,可以使用stack: false選項。

+0

非常感謝。當我在''library'之外設置'stack:true'時:{}'。有用。我感謝你支持你的工具!謝謝。 – HashRocketSyntax