我一直在使用具有不同值的“多条形水平图表”，在单独的 HTML 页面上它们看起来不同。在同一页面上，尽管 ID 不同，但看起来相同
可能是什么问题？
这些是图表:http://codepen.io/neonpulp/pen/xOPmrN
下面是 HTML 和 js 代码。
<div id="chart-avapro" style="height: 500px;" class="with-3d-shadow with-transitions">
<svg></svg>
</div>
<div id="chart-bocdar" style="height: 500px;" class="with-3d-shadow with-transitions">
<svg></svg>
</div>
var long_short_data = [
{
key: '1er trimestre',
color: "#438da7",
values: [
{
"label" : "CONTROL, VIGILANCIA Y SEGUIMIENTO AMBIENTAL" ,
"value" : 13
} ,
{
"label" : "FORTALECIMIENTO INSTITUCIONAL" ,
"value" : 0
} ,
{
"label" : "COMUNICACIÓN, EDUCACIÓN E INVESTIGACIÓN AMBIENTAL" ,
"value" : 37
} ,
{
"label" : "MITIGACIÓN Y GESTIÓN DEL RIESGO AMBIENTAL" ,
"value" : 0
} ,
{
"label" : "EXPEDIENTE FORESTAL URBANO" ,
"value" : 0
} ,
{
"label" : "SISTEMA DE MONITOREO DE LA CALIDAD DEL AIRE" ,
"value" : 13
} ,
{
"label" : "SISTEMA DE MONITOREO DE LA CALIDAD DE RECURSOS HÍDRICOS" ,
"value" : 6
} ,
{
"label" : "OPERACIÓN Y MANTENIMIENTO DE LA BOCANA Y DÁRSENA" ,
"value" : 0
} ,
{
"label" : "PARQUE DISTRITAL CIÉNAGA DE LA VIRGEN" ,
"value" : 18
}
]
},
{
key: '2do trimestre',
color: "#d86d18",
values: [
{
"label" : "CONTROL, VIGILANCIA Y SEGUIMIENTO AMBIENTAL" ,
"value" : 87
} ,
{
"label" : "FORTALECIMIENTO INSTITUCIONAL" ,
"value" : 66
} ,
{
"label" : "COMUNICACIÓN, EDUCACIÓN E INVESTIGACIÓN AMBIENTAL" ,
"value" : 63
} ,
{
"label" : "MITIGACIÓN Y GESTIÓN DEL RIESGO AMBIENTAL" ,
"value" : 5
} ,
{
"label" : "EXPEDIENTE FORESTAL URBANO" ,
"value" : 75
} ,
{
"label" : "SISTEMA DE MONITOREO DE LA CALIDAD DEL AIRE" ,
"value" : 33
} ,
{
"label" : "SISTEMA DE MONITOREO DE LA CALIDAD DE RECURSOS HÍDRICOS" ,
"value" : 32
} ,
{
"label" : "OPERACIÓN Y MANTENIMIENTO DE LA BOCANA Y DÁRSENA" ,
"value" : 27
} ,
{
"label" : "PARQUE DISTRITAL CIÉNAGA DE LA VIRGEN" ,
"value" : 17
}
]
}
];
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarHorizontalChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.duration(250)
.margin({left: 345})
.stacked(true);
chart.yAxis.tickFormat(d3.format(',.2f'));
chart.yAxis.tickFormat(function(d) { return d3.format(',f')(d)+ '%' });
chart.yAxis.axisLabel('');
chart.xAxis.axisLabel('').axisLabelDistance(20);
d3.select('#chart-avapro svg')
.datum(long_short_data)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
chart.state.dispatch.on('change', function(state){
nv.log('state', JSON.stringify(state));
});
return chart;
});
var long_short_data = [
{
key: '1er trimestre',
color: "#438da7",
values: [
{
"label" : "Manual de Operación del Sistema Bocana y Darsena" ,
"value" : 0
} ,
{
"label" : "Acción Ejecutada / Acción Programada" ,
"value" : 0
} ,
{
"label" : "Relimpia Realizada / Relimpia Programada" ,
"value" : 0
} ,
{
"label" : "Batimetría Realizada / Batimetría Programada" ,
"value" : 0
}
]
},
{
key: '2do trimestre',
color: "#d86d18",
values: [
{
"label" : "Manual de Operación del Sistema Bocana y Darsena" ,
"value" : 100
} ,
{
"label" : "Acción Ejecutada / Acción Programada" ,
"value" : 10
} ,
{
"label" : "Relimpia Realizada / Relimpia Programada" ,
"value" : 0
} ,
{
"label" : "Batimetría Realizada / Batimetría Programada" ,
"value" : 0
}
]
}
];
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarHorizontalChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.duration(250)
.margin({left: 345})
.stacked(true);
chart.yAxis.tickFormat(d3.format(',.2f'));
chart.yAxis.tickFormat(function(d) { return d3.format(',f')(d)+ '%' });
chart.yAxis.axisLabel('');
chart.xAxis.axisLabel('').axisLabelDistance(20);
d3.select('#chart-bocdar svg')
.datum(long_short_data)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
chart.state.dispatch.on('change', function(state){
nv.log('state', JSON.stringify(state));
});
return chart;
});
最佳答案
您期望在重新定义 JSON 数据 long_short_data 之前，第一个图表将绑定(bind)数据并绘制。所发生的情况是，图表是使用 long_short_data 的第二个定义绘制的。对于这个简单的示例，使用不同的名称声明第二个数据集。
关于javascript - d3.js nvd3 问题 : different charts on the same HTML page look the same (even though they have different IDs)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38356517/