最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - c3js - D3js - Customize labels in a simple bar chart - Stack Overflow

programmeradmin6浏览0评论

Probably the best way to provide some context is showing the code:

/

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

In that bar chart, there are some "special" values. I'm looking for a way to customize those values as follow:

  • 10.001 = "N/S"
  • 10.002 = "N/A"

The rest of values from 0 to 10 in the y axis should keep the way they are.

Another requirement is that the Y axis should show values only from 0 to 10.

Modify the DOM with jQuery might be a solution, but it's kind of hacking, I'd like to get the result using correctly the API.

Any help is appreciated!

Probably the best way to provide some context is showing the code:

http://jsfiddle/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
});

In that bar chart, there are some "special" values. I'm looking for a way to customize those values as follow:

  • 10.001 = "N/S"
  • 10.002 = "N/A"

The rest of values from 0 to 10 in the y axis should keep the way they are.

Another requirement is that the Y axis should show values only from 0 to 10.

Modify the DOM with jQuery might be a solution, but it's kind of hacking, I'd like to get the result using correctly the API.

Any help is appreciated!

Share Improve this question asked Aug 24, 2015 at 18:38 theRonnytheRonny 3955 silver badges23 bronze badges 1
  • In the meanwhile I had to add this piece of code to modify the DOM with jQuery: { $('#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; } }); } – theRonny Commented Aug 24, 2015 at 19:49
Add a ment  | 

1 Answer 1

Reset to default 7

You can add a format method for your data labels, like so

...
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;
    }
}
...

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


Fiddle - http://jsfiddle/duc8sLmo/

发布评论

评论列表(0)

  1. 暂无评论