Question

我在这里遇到一个小问题，我正在制作一些图表，但我不能让它工作，我不知道为什么。我正在使用Chart.js作为图表图形。

这是我的HTML5，它有一个“画布”，其中图表将与ID = canvasEjercicio2。

<div data-theme="a" data-role="header">
    <a data-role="button" data-inline="true" data-direction="reverse" data-theme="a" data-transition="slideup"
    href="#principal" data-icon="home" data-iconpos="left" class="ui-btn-left">
    Volver
    </a>
    <h3 id="nombreAplicacion">
        Nombre Aplicacion
    </h3>
</div>
<div data-role="content">
    <h4 id="tituloEstadisticas">
        Estadisticas
    </h4>
    <canvas id="canvasEjercicio2" width="400" height="400"></canvas>
</div>

这是我的jquery代码，这里的东西不能用于图表，我无法弄清楚这是什么在这里崩溃：

/* ******************************************/
/* *****    PAGE REFRESH ESTADISTICAS   *****/
/* ******************************************/
$(document).on('pagebeforeshow', '#estadisticas', function()
{ 
    graficar();
    mostrarDatosEjercicios();
});

/* ******************************************/
/* ****  MOSTRAR ESTADISTICAS AL ENTRAR  ****/
/* ******************************************/
$('#botonEstadisticas').click(function()
{
    graficar();
    mostrarDatosEjercicios();
}
);

/* ******************************************/
/* ****   MOSTRAR GRAFICOS EJERCICIO 2   ****/
/* ******************************************/
function graficar()
{
    //Get the context of the canvas element we want to select
    var contexto = $("#canvasEjercicio2").get(0).getContext("2d");
    var datos = [
        {
            value: 1,
            color:"#F38630"
        },
        {
            value : 2,
            color : "#E0E4CC"
        },
        {
            value : 3,
            color : "#69D2E7"
        }           
    ];
    var graficoEjercicio2 = new Chart(contexto).Pie(datos);
};

Answer 1

我发现这篇文章时遇到了同样的问题，虽然解决方案不是很清楚。只是为了记录，我会说解决方案是在pageshow事件中加载图表，而不是之前。

$(document).on("pageshow", "#page-grafica", function(event) {
   // Create the chart here...
}

无法使用Chart.js和JQuery Mobile进行图形处理

1 个答案: