我一直在使用不同值的"多条水平图"，在不同的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;
});