javascript - 如何在C3图表中创建刻度线

我必须在C3条形图中表示数据。问题在于数据集通常包含一个或两个非常大的值，而其他值则小得多（相比而言较小）。这会导致几乎看不见的条形旁边的条形非常高。我知道使用像this这样的小数位数分隔符可以解决问题。但是我没有在C3中找到一个甚至提到它的例子。
有什么方法可以在C3 charts?中创建缩放比例中断吗？如果没有，是否有其他替代的开源JS库可以做到这一点？

最佳答案

您可以使用带有分割域的d3线性比例尺来转换值和比例尺。

然后使用多条网格线绘制拆分

的HTML

<div id="chart"></div>

脚本

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' }]
        }
    }
});

您必须使用网格线而不是区域，因为区域层在条形图层下方（网格层在条形图层上方）

的CSS

它由（粗）填充线和2条边界线组成

.breakFill > line {
    stroke-width: 4px;
    stroke: white;
    stroke-opacity: 1;
}
.break > line {
    stroke-width: 1px;
    stroke: grey;
}

您还可以使用弯曲的样式更好地设置样式，或将HTML元素放置在具有弯曲背景的上方。

小提琴-http://jsfiddle.net/tdfpj3oc/

关于javascript - 如何在C3图表中创建刻度线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30890428/