C3图:网格线与一致数量的刻度线不对齐

时间:2017-05-25 01:05:54

标签: c3.js

我的C3图表有一个奇怪的问题。这是一个Rails应用:我使用c3-rails gem和d3-rails 3.5.17 gem。

正如您在下面的屏幕截图中看到的那样,我发现我的网格线从刻度线偏移,每个都相同。每个网格线的左移位数等于x轴右侧额外空间的数量。

Graph with misaligned gridlines

以下是代码:

const chart = c3.generate({
 bindto: "#graph",
 data: {
   x: 'x',
   columns: [
     myData.dateTime, myData.values
   ]
 },
 legend: {
   hide: true
 },
 grid: {
   x: {
     show: true
   },
   focus: {
     show: true
   }
 },
 axis: {
   x: {
     localtime: true,
     type: 'timeseries',
     tick: {
       count: 9,
       format: '%d %b, %H:%M',
       rotate: 50
     },
     padding: {
       left: 0,
       right: 0
     }
   },
   y: {
     label: {
       text: json.y_title,
       position: 'outer-middle'
     }
   }
 }
})

根据C3 docs,似乎无法自定义基本网格线功能,但您可以添加extra gridlines。但是,我不能使用这种方法,因为我的数据是动态的。

有什么想法吗?

0 个答案:

没有答案