Google 图表错误地将数据绘制为重叠

Question

我在面积图上绘制了 2 条线，但出于某种原因，当点具有非常不同的值时，它会将点绘制为重叠。 4 != 425

文档默认将 vAxis.scaleType 列为 null，唯一的其他选项是 logScale。我设置了 scaleType: nil 和 logScale: 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'
          }
        }
      }
    }

Answer 1

默认情况下，使用 Chartkick 堆叠面积图。如果不需要，您可以使用 stack: false 选项。

Google 图表错误地将数据绘制为重叠

Google Chart incorrectly plotting data as overlapping

charts

graph

google-visualization

chartkick