Javascript d3.js nvd3问题：同一HTML页面上的不同图表看起来是一样的（尽管它们有不同的ID）

嗨，我一直在使用不同值的“多条水平图表”，在不同的HTML页面上，它们看起来是不同的。在同一页上，它们看起来是一样的，尽管它们有不同的ID

可能是什么问题

以下是图表：

下面是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>

---

您希望在重新定义JSON数据long\u short\u数据之前，第一个图表将绑定并绘制数据。现在的情况是，图表是使用第二种定义的长短数据绘制的。对于这个简单的示例，请使用不同的名称声明第二个数据集。

您希望在重新定义JSON数据long\u short\u数据之前，第一个图表将绑定并绘制数据。现在的情况是，图表是使用第二种定义的长短数据绘制的。对于这个简单的示例，请使用不同的名称声明第二个数据集。

非常感谢Jeff H！非常感谢Jeff H！

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