Javascript 如何在c3图表中创建刻度分隔符
我必须在Javascript 如何在c3图表中创建刻度分隔符,javascript,charts,c3,Javascript,Charts,C3,我必须在C3条形图中表示数据。问题是数据集通常包含一个或两个非常大的值,而其他值则小得多(相比之下更小)。这将导致在几乎看不见的钢筋旁边出现非常高的钢筋。我知道像这样使用分界可以解决这个问题。但是我在C3中找不到一个提到它的例子。 是否有任何方法可以在C3图表中创建分界点?如果没有,是否有其他开源JS库可以这样做?您可以使用d3线性分界点来转换值和分界点 然后使用多条网格线绘制拆分 HTML <div id="chart"></div> 您还可以使用波形模式更好地设置样
C3
条形图中表示数据。问题是数据集通常包含一个或两个非常大的值,而其他值则小得多(相比之下更小)。这将导致在几乎看不见的钢筋旁边出现非常高的钢筋。我知道像这样使用分界可以解决这个问题。但是我在C3
中找不到一个提到它的例子。
是否有任何方法可以在
C3图表中创建分界点?
如果没有,是否有其他开源JS
库可以这样做?您可以使用d3线性分界点来转换值和分界点
然后使用多条网格线绘制拆分
HTML
<div id="chart"></div>
您还可以使用波形模式更好地设置样式,或者在其上放置一个具有波形背景的HTML元素
小提琴-伟大的解决方案!我做了一些更改以满足我的需要(改进顶部压缩的折线图的可视化)(例如使用线条)(例如使用轴打断)
var myScale = d3.scale.linear().domain([0, 10, 90, 100]).range([0, 40, 60, 100]);
var chart = c3.generate({
data: {
columns: [
['A', 3, 2, 1, 4, 1.5, 92.5, 93, 91, 94].map(function (value, index) {
return index ? myScale(value) : value;
})],
type: 'bar'
},
tooltip: {
format: {
value: function (value) {
return parseFloat(myScale.invert(value).toFixed(5));
}
}
},
axis: {
y: {
min: 0,
max: 100,
padding: {
top: 0,
bottom: 0
},
tick: {
format: function (d) {
if (d > myScale.range()[1] && d < myScale.range()[2]) return null
else return myScale.invert(d)
}
}
}
},
grid: {
y: {
lines: [{ value: (myScale.range()[1] + myScale.range()[2]) / 2, class: 'breakFill' },
{value: (myScale.range()[1] + myScale.range()[2]) / 2 + 1, class: 'break' },
{value: (myScale.range()[1] + myScale.range()[2]) / 2 - 1, class: 'break' }]
}
}
});
.breakFill > line {
stroke-width: 4px;
stroke: white;
stroke-opacity: 1;
}
.break > line {
stroke-width: 1px;
stroke: grey;
}