要解决Angular-nvd3的discreteBarChart柱状图不显示的问题,可以尝试以下解决方法:
angular.module('yourModuleName', ['nvd3']);
$scope.data = [
{
key: "柱状图",
values: [
{label: "A", value: 10},
{label: "B", value: 20},
{label: "C", value: 30}
]
}
];
nvd3-discrete-bar-chart
指令来渲染柱状图。确保你的HTML代码类似于以下代码:
options
变量,用于配置柱状图的样式和行为。例如:$scope.options = {
chart: {
type: 'discreteBarChart',
height: 300,
margin : {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function(d){ return d.label; },
y: function(d){ return d.value; },
showValues: true,
valueFormat: function(d){
return d3.format(',.0f')(d);
},
duration: 500,
xAxis: {
axisLabel: 'X轴标签'
},
yAxis: {
axisLabel: 'Y轴标签',
axisLabelDistance: -10
}
}
};
通过以上解决方法,你应该能够解决Angular-nvd3的discreteBarChart柱状图不显示的问题。如果问题仍然存在,请检查浏览器控制台是否有其他错误信息,并确保你的数据和配置正确。