我在区域图表上绘制了2条线,但由于某些原因,当它们具有非常不同的值时,它会将点绘制为重叠。 4 != 425
文档列出vAxis.scaleType
默认为null,唯一的另一个选项是logScale。我设置scaleType: nil
和logScale: false
只是为了确保它知道要使用的比例。
以下是从pry传递到图表的数据,这与db中的数据一致。
[{: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'
}
}
}
}
答案 0 :(得分:1)
默认情况下,Chartkick会将区域图堆叠起来。如果不需要,您可以使用stack: false
选项。