计算C3js水平条形图的填充 [英] Calculate padding for C3js horizontal bar charts
本文介绍了计算C3js水平条形图的填充的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
基于我的旧问题: C3js水平条形图标签被切掉和调整大小问题我现在正尝试使用画布上下文textwidth根据文本宽度计算y轴的必要填充.
Based on my old Problem: C3js horizontal bar chart labels cut off and sizing issue I am now trying to calculate the neccessary padding for y-axis based on the text width using canvas context textwidth.
const colors = ['#0065A3', '#767670', '#D73648', '#7FB2CE', '#00345B'];
const data= [
['veryveryveryveryverylongdatalabel01', 439034],
['veryveryveryveryverylongdatalabel02', 413664],
['veryveryveryveryverylongdatalabel03', 351376],
['veryveryveryveryverylongdatalabel04', 349932],
['veryveryveryveryverylongdatalabel05', 316490],
['veryveryveryveryverylongdatalabel06', 315039],
['veryveryveryveryverylongdatalabel07', 285908],
['veryveryveryveryverylongdatalabel08', 285681],
['veryveryveryveryverylongdatalabel09', 285215],
['veryveryveryveryverylongdatalabel10', 203248],
['veryveryveryveryverylongdatalabel11', 200508],
['veryveryveryveryverylongdatalabel12', 195508],
['veryveryveryveryverylongdatalabel13', 195058],
['veryveryveryveryverylongdatalabel14', 193508],
['veryveryveryveryverylongdatalabel15', 185508],
['veryveryveryveryverylongdatalabel16', 180508],
['veryveryveryveryverylongdatalabel17', 177508]
];
let totalDataValue = 0
data.forEach(function(d){
totalDataValue+=d[1];
});
let maxLabelWidth = 0;
/**
* Measures the rendered width of arbitrary text given the font size and font face
* @param {string} text The text to measure
* @param {number} fontSize The font size in pixels
* @param {string} fontFace The font face ("Arial", "Helvetica", etc.)
* @returns {number} The width of the text
**/
function getWidth(text, font) {
const canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
context.font = font;
return context.measureText(text).width;
}
//TODO get font fpr c3-text from CSS
const font = '10px sans-serif'
data.forEach(function(d){
//formatted string
const label = d[0] + ": " + d3.format(",.0f")(d[1]) + " ["+d3.format(".2%")(d[1]/totalDataValue)+"]";
maxLabelWidth = Math.max(maxLabelWidth, getWidth(label, font));
});
var C3Styles = null;
const chart1 = c3.generate({
bindto: d3.select('#chart1'),
data: {
columns: data,
type: 'bar',
labels: {format : function(v, id) {return id + ": " + d3.format(",.0f")(v) + " ["+d3.format(".2%")(v/totalDataValue)+"]"; }}
},
bar: {
width: { ratio: 1}
},
legend: {
show: false,
},
tooltip: {
show: true,
format: {
value: function(value) {
return d3.format(",.0f")(value);
}
}
},
zoom: {
enabled: true
},
axis: {
x: {
show:false,
type:'category',
categories: ['value1']
},
y: {
show:false,
padding : {
top: Math.ceil(maxLabelWidth)
}
},
rotated: true
}
});#chart1 {
width: 600px;
height: 400px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.css" rel="stylesheet" />
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.15/c3.min.js"></script>
<div id="chart1" class "c3">
</div>还有两个剩余的问题:首先，尽管没有间距，填充等，但计算出的文本宽度略小于SVG文本元素的宽度.如何根据文本长度获取SVG元素的宽度?
There are two remaining Problems: First, the calculated width of the text is slightly lower than the width of the SVG text element although there is no spacing, padding etc. How do I get the width of the SVG element based on the text length?
第二，即使可以正确计算该值，所计算的文本宽度也似乎太低了，无法用于axis.y.padding.top值.我想念什么?
Second, even if the value would be calculated correctly the calculated width of the text seems to be much to low to be used for axis.y.padding.top value. What am I missing?
推荐答案
我找到了一个解决方案:不要使用y轴填充，而要使用全局填充并关闭剪切路径.
I found a solution for this: Do not use y-axis padding but instead global padding and turn off clip-path.
padding : {
right: Math.ceil(maxLabelDataWidth)
},
和
d3.select(chart1.element).select("." + c3.chart.internal.fn.CLASS.chart).attr("clip-path", null);
const colors = ['#0065A3', '#767670', '#D73648', '#7FB2CE', '#00345B'];
const data= [
['veryveryveryveryverylongdatalabel01', 439034],
['veryveryveryveryverylongdatalabel02', 413664],
['veryveryveryveryverylongdatalabel03', 351376],
['veryveryveryveryverylongdatalabel04', 349932],
['veryveryveryveryverylongdatalabel05', 316490],
['veryveryveryveryverylongdatalabel06', 315039],
['veryveryveryveryverylongdatalabel07', 285908],
['veryveryveryveryverylongdatalabel08', 285681],
['veryveryveryveryverylongdatalabel09', 285215],
['veryveryveryveryverylongdatalabel10', 203248],
['veryveryveryveryverylongdatalabel11', 200508],
['veryveryveryveryverylongdatalabel12', 195508],
['veryveryveryveryverylongdatalabel13', 195058],
['veryveryveryveryverylongdatalabel14', 193508],
['veryveryveryveryverylongdatalabel15', 185508],
['veryveryveryveryverylongdatalabel16', 180508],
['veryveryveryveryverylongdatalabel17', 177508]
];
let totalDataValue = 0
data.forEach(function(d){
totalDataValue+=d[1];
});
let maxLabelDataWidth = 0;
/**
* Measures the rendered width of arbitrary text given the font size and font face
* @param {string} text The text to measure
* @param {number} fontSize The font size in pixels
* @param {string} fontFace The font face ("Arial", "Helvetica", etc.)
* @returns {number} The width of the text
**/
function getWidth(text, font) {
const canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
context.font = font;
return context.measureText(text).width;
}
//TODO get font fpr c3-text from CSS
const font = '10px sans-serif'
data.forEach(function(d){
//formatted string
const label = d3.format(",.0f")(d[1]) + " ["+d3.format(".2%")(d[1]/totalDataValue)+"]";
maxLabelDataWidth = Math.max(maxLabelDataWidth, getWidth(label, font));
});
var C3Styles = null;
const chart1 = c3.generate({
bindto: d3.select('#chart1'),
data: {
columns: data,
type: 'bar',
labels: {format : function(v, id) {return id + ": " + d3.format(",.0f")(v) + " ["+d3.format(".2%")(v/totalDataValue)+"]"; }}
},
bar: {
width: { ratio: 1}
},
legend: {
show: false,
},
tooltip: {
show: true,
format: {
value: function(value) {
return d3.format(",.0f")(value);
}
}
},
zoom: {
enabled: true
},
padding : {
right: Math.ceil(maxLabelDataWidth)
},
axis: {
x: {
show:false,
type:'category',
categories: ['value1']
},
y: {
show:false,
},
rotated: true
}
});
d3.select(chart1.element).select("." + c3.chart.internal.fn.CLASS.chart).attr("clip-path", null);#chart1 {
width: 600px;
height: 400px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" rel="stylesheet" />
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>
<div id="chart1" class "c3">
</div>这篇关于计算C3js水平条形图的填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
