uniwebsidad

Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

Imágenes en las labels en una gráfica en canvas

31 de marzo de 2016

Hola:

Tengo una grafica de unos bancos, relizada en JS y necesito poner en las labels los logos en vez de los nombres. Este es el codigo:

<div class="box_graph">
                <div class="container">
                    <div class="col-md-12">
                        <div class="col-md-offset-2 col-md-8">
                            <canvas id="canvas"></canvas>
                        </div>
 
                    </div>
                </div>
        </div>
        <div style="background:#eee;">
            <div class="container">
                <span style="text-align:center;"><small>* Ranking de entidades con deuda previamente validada por el cliente<br />** En miles de euros</small></span>
            </div>  
        </div>
 
        <script>
 
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
 
    var barChartData = {
        labels : [
                    '{{ isset($banks[0]) ? $banks[0]->bank->logo : "-" }}',
                    '{{ isset($banks[1]) ? $banks[1]->bank->logo : "-" }}',             
                    '{{ isset($banks[2]) ? $banks[2]->bank->logo : "-" }}',             
                    '{{ isset($banks[3]) ? $banks[3]->bank->logo : "-" }}',
                    '{{ isset($banks[4]) ? $banks[4]->bank->logo  : "-" }}',
                    '{{ isset($banks[5]) ? $banks[5]->bank->logo  : "-" }}',
                    '{{ isset($banks[6]) ? $banks[6]->bank->logo  : "-" }}'],
        datasets : [
            {
                fillColor : "rgba(60,191,235,1)",
                strokeColor : "rgba(60,191,235,1)",
                highlightFill: "rgba(60,191,235,1)",
                highlightStroke: "rgba(60,191,235,0.5)",
                data : [
                {{ isset($banks[0]) ? ceil($banks[0]->sum/1000) : 0 }},
                {{ isset($banks[1]) ? ceil($banks[1]->sum/1000) : 0 }},             
                {{ isset($banks[2]) ? ceil($banks[2]->sum/1000) : 0 }},             
                {{ isset($banks[3]) ? ceil($banks[3]->sum/1000) : 0 }},
                {{ isset($banks[4]) ? ceil($banks[4]->sum/1000) : 0 }},
                {{ isset($banks[5]) ? ceil($banks[5]->sum/1000) : 0 }},
                {{ isset($banks[6]) ? ceil($banks[6]->sum/1000) : 0 }}
                ]
            }
        ]
 
    }
    window.onload = function(){
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx).Bar(barChartData, {
            responsive : true
        });
    }
 
    </script>

Estoy un poco perdido con este tema. Muchas gracias por vuestra ayuda. Un saludo

canvas js