javascript - bootstrap - chart.js tooltip example

Al convertir el gráfico de lienzo de Chart.js en imagen usando.toDataUrl() se obtiene una imagen en blanco

Question

Estoy usando Chart.js. Estoy tratando de convertir el gráfico a una imagen obteniendo una cadena de base 64. El tutorial ( http://www.chartjs.org/docs/ ) dedica una línea completa sobre el tema:

El elemento del lienzo también permite guardar el contenido como una cadena base 64, lo que permite guardar el gráfico como una imagen.

Un elemento de canvas tiene el método de toDataURL , que devuelve una cadena base64 de la imagen. Sin embargo, cuando hago eso, la imagen que representa es solo un rectángulo transparente con las dimensiones del gráfico, y no incluye el contenido del mismo.

Aquí hay un violín: http://jsfiddle.net/KSgV7/

Las "imágenes" en el violín están decoradas con un borde negro, para que pueda ver dónde se supone que deben estar, ya que parecen ser un gran bloque transparente.

¿Alguien ha convertido con éxito un gráfico Chart.js en una imagen?

Answer 1

@EH_warch Debe usar la devolución de llamada completa para generar su base64:

onAnimationComplete: function(){
    console.log(this.toBase64Image())
}

Si ve una imagen en blanco, significa que llamó a toBase64Image antes de que terminara de renderizarse.

Answer 2

Debería usar la función de la API de toBase64Image() lugar y llamarla una vez que se complete la animación. Por lo tanto:

var pieChart, URI;

var options = {
    animation : {
        onComplete : function(){    
            URI = pieChart.toBase64Image();
        }
    }
};

var content = {
    type: ''pie'', //whatever, not relevant for this example
    data: {
        datasets: dataset //whatever, not relevant for this example
    },
    options: options        
};    

pieChart = new Chart(pieChart, content);

Ejemplo

Puedes comprobar este ejemplo y ejecutarlo.

var chart = new Chart(ctx, {
   type: ''bar'',
   data: {
      labels: [''Standing costs'', ''Running costs''], // responsible for how many bars are gonna show on the chart
      // create 12 datasets, since we have 12 items
      // data[0] = labels[0] (data for first bar - ''Standing costs'') | data[1] = labels[1] (data for second bar - ''Running costs'')
      // put 0, if there is no data for the particular bar
      datasets: [{
         label: ''Washing and cleaning'',
         data: [0, 8],
         backgroundColor: ''#22aa99''
      }, {
         label: ''Traffic tickets'',
         data: [0, 2],
         backgroundColor: ''#994499''
      }, {
         label: ''Tolls'',
         data: [0, 1],
         backgroundColor: ''#316395''
      }, {
         label: ''Parking'',
         data: [5, 2],
         backgroundColor: ''#b82e2e''
      }, {
         label: ''Car tax'',
         data: [0, 1],
         backgroundColor: ''#66aa00''
      }, {
         label: ''Repairs and improvements'',
         data: [0, 2],
         backgroundColor: ''#dd4477''
      }, {
         label: ''Maintenance'',
         data: [6, 1],
         backgroundColor: ''#0099c6''
      }, {
         label: ''Inspection'',
         data: [0, 2],
         backgroundColor: ''#990099''
      }, {
         label: ''Loan interest'',
         data: [0, 3],
         backgroundColor: ''#109618''
      }, {
         label: ''Depreciation of the vehicle'',
         data: [0, 2],
         backgroundColor: ''#109618''
      }, {
         label: ''Fuel'',
         data: [0, 1],
         backgroundColor: ''#dc3912''
      }, {
         label: ''Insurance and Breakdown cover'',
         data: [4, 0],
         backgroundColor: ''#3366cc''
      }]
   },
   options: {
      responsive: false,
      legend: {
         position: ''right'' // place legend on the right side of chart
      },
      scales: {
         xAxes: [{
            stacked: true // this should be set to make the bars stacked
         }],
         yAxes: [{
            stacked: true // this also..
         }]
      },
      animation : {
         onComplete : done
      }      
   }
});

function done(){
    alert(chart.toBase64Image());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx" width="700"></canvas>

Answer 3

El gráfico parece ser asíncrono, por lo que probablemente deba proporcionar una devolución de llamada cuando la animación haya terminado o el lienzo estará vacío.

var options = {
    bezierCurve : false,
    onAnimationComplete: done  /// calls function done() {} at end
};

Answer 4

La API de Chart.JS ha cambiado desde que se publicó y parece que los ejemplos anteriores no funcionaban para mí. Aquí hay un violín actualizado que funciona en las versiones más nuevas.

HTML:

<body>
    <canvas id="canvas" height="450" width="600"></canvas>
    <img id="url" />
</body>

JS:

function done(){
  alert("haha");
  var url=myLine.toBase64Image();
  document.getElementById("url").src=url;
}

var myLine = new 
   Chart(document.getElementById("canvas").getContext("2d"),
     {
        data:lineChartData,
        type:"line",
        options:options
      }
    );

http://jsfiddle.net/KSgV7/585/

Answer 5

Primero convierte el lienzo de Chart.js en una cadena base64.

var url_base64 = document.getElementById(''myChart'').toDataURL(''image/png'');

Establézcalo como un atributo href para la etiqueta de anclaje.

link.href = url_base64;

<a id=''link'' download=''filename.png''>Save as Image</a>

Answer 6

Puede acceder afterRender gancho de afterRender usando plugins .

Y here están todos los api de plugin disponibles.

En el archivo html:

<html>
  <canvas id="myChart"></canvas>
  <div id="imgWrap"></div>
</html>

En el archivo js:

var chart = new Chart(ctx, {
  ...,
  plugins: [{
    afterRender: function () {
      // Do anything you want
      renderIntoImage()
    },
  }],
  ...,
});

const renderIntoImage = () => {
  const canvas = document.getElementById(''myChart'')
  const imgWrap = document.getElementById(''imgWrap'')
  var img = new Image();
  img.src = canvas.toDataURL()
  imgWrap.appendChild(img)
  canvas.style.display = ''none''
}

Answer 7

Resolví este problema en este código usando la biblioteca Chartjs.js

Código HTML:

<img id="ChartImage" style="margin: 0 auto;" />
<canvas id="myChart" style="margin: 0 auto;" ></canvas>

Opción de gráfico de Javascript:

options: {
  legend: { position: ''bottom'', display: true },
  animation: {
     onComplete: function(){
        var url = barChart.toBase64Image(); //get image as base64
        document.getElementById("ChartImage").src = url; //to fill image in html
     }
  }    
},

Answer 8

También puede utilizar la animación de configuración del método toBase64Image (): falso

var options = {
    bezierCurve : false,
    animation: false
};

Violín actualizado