c3js - D3js - 在简单的条形图中自定义标签答案

【问题标题】：c3js - D3js - Customize labels in a simple bar chartc3js - D3js - 在简单的条形图中自定义标签
【发布时间】：2015-11-18 07:04:06
【问题描述】：

提供一些上下文的最佳方式可能是显示代码：

http://jsfiddle.net/ron_camaron/baa0q55j/12/

var arrayOfDates = ['Jun 2015', 'May 2015', 'Mar 2015', 'Feb 2015', 'Jan 2015', 'Dec 2014'];
var arrayOfData = [7.25, 10.001, 10, 8.39, 10.002, 6.76]
var cautionColor = '#AB2522';
var bronzeColor = '#8C7853';
var silverColor = '#CCCCCC';
var goldColor = '#FFCC00';
var neutralColor = "#ffffff";

var chart = c3.generate({
bindto: '#divForGraph_1',
size: {
    height: 203,
    width: 380
},
data: {
    columns: [
        ['period'].concat(arrayOfData)
    ]
    ,
    types: {
        period: 'bar'
    }
    ,
    labels: true
    ,
    names: {
        period: 'Scoring Table'
    }
    ,
    color: function (color, d) {
        if (d.value < 4) {
            return cautionColor;
        } else if (d.value < 7) {
            return bronzeColor;
        } else if (d.value < 10) {
            return silverColor;
        } else if (d.value > 10 && d.value < 10.001) {
            return neutralColor;
        } else if (d.value >= 10.001) {
            return neutralColor;
        }

        return goldColor;
    }
    ,
    axis: {
        y: {
            label: {
                text: 'Scores',
                position: 'inner-middle'
            }
        },
        x: {
            type: 'timeseries',
            tick: {
                fit: true
            }
        }
    }
}
,
axis: {
 x:{
     type: 'category',
     categories: arrayOfDates
 }
}
});

chart.axis.max({
y: 10.002
});
chart.axis.min({
y: 0
});

在那个条形图中，有一些“特殊”值。我正在寻找一种方法来自定义这些值，如下所示：

10.001 = “不适用”
10.002 = “不适用”

y 轴上从 0 到 10 的其余值应保持原样。

另一个要求是 Y 轴应仅显示 0 到 10 之间的值。

使用 jQuery 修改 DOM 可能是一个解决方案，但它是一种黑客行为，我想使用正确的 API 来获得结果。

感谢任何帮助！

【问题讨论】：

同时我不得不添加这段代码来用jQuery修改DOM：{ $('#divForGraph_1').find('.c3-text').each(function () { var theValue = parseFloat(this.innerHTML); switch (theValue) { case 10.001: this.innerHTML = 'N/S'; break; case 10.002: this.innerHTML = 'N/A'; break; } }); }

标签： javascript d3.js graph charts c3

【解决方案1】：

您可以为数据标签添加format 方法，如下所示

...
labels: {
    format: function (v, id, i, j) {
        if (v == 10.001)
            return "N/S";
        else if (v == 10.002)
            return "N/A";
        else
            return v;
    }
}
...

见http://c3js.org/reference.html#data-labels-format

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

【讨论】：