HTML5 Canvas绘制图表后扩展绘图区域的技术咨询

Absolutely, you can add 100px of header and footer space to your Chart.js chart, inject custom text into those areas, and export the final result as a PNG. Let's modify your existing exportWithFormatting function to make this happen:

Key Changes Explained #

• We'll create a temporary offscreen canvas that's 200px taller than your original chart (100px for the header, 100px for the footer)
• Draw the existing chart onto this new canvas, offsetting it down by 100px to make room for the header
• Use native Canvas API methods to draw your custom header and footer text
• Export the temporary canvas as the final PNG file

Modified Export Function #

function exportWithFormatting($id) {
    // Get the chart variable from the canvas data attribute
    var chart_variable_name = $("#" + $id).data('chart-var');
    var chart_variable = eval(chart_variable_name);
    var ctx = $("#" + $id);
    var exportTitle = $(ctx).data('export-title');
    var context = ctx[0].getContext('2d');
    var old_title = chart_variable.options.title.text;

    // Hide the original chart title temporarily
    chart_variable.options.title.text = "";
    chart_variable.update(0);

    // --- Start of new header/footer logic ---
    // Grab original canvas dimensions
    const originalWidth = ctx[0].width;
    const originalHeight = ctx[0].height;

    // Create temporary canvas with extra space for header/footer
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = originalWidth;
    tempCanvas.height = originalHeight + 200; // +100px top, +100px bottom

    // Fill temporary canvas with white background (optional but ensures clean export)
    tempCtx.fillStyle = '#ffffff';
    tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);

    // Draw the original chart onto the temp canvas, offset by 100px down
    tempCtx.drawImage(ctx[0], 0, 100);

    // Add header text (adjust styling/coordinates to match your needs)
    tempCtx.fillStyle = '#333333';
    tempCtx.font = '16px Arial';
    tempCtx.textAlign = 'center';
    tempCtx.fillText('Your Custom Header Text', tempCanvas.width / 2, 50); // Y=50 sits in the middle of the 100px header

    // Add footer text (adjust styling/coordinates to match your needs)
    tempCtx.fillStyle = '#666666';
    tempCtx.font = '14px Arial';
    tempCtx.textAlign = 'center';
    tempCtx.fillText('Your Custom Footer Text', tempCanvas.width / 2, originalHeight + 150); // Y=original+150 sits in the middle of the footer

    // --- End of new header/footer logic ---

    // Get base64 data from temporary canvas
    var newBase64 = tempCanvas.toDataURL("image/png");

    // Create temporary download link
    $("<a id='" + $id + "-button-temp' style='display:none;' class='button-style' href='" + newBase64 + "' download='" + $id + ".png' >Download</a>").insertAfter($('#' + $id + '-button'));

    // Trigger download and clean up
    $("#" + $id + "-button-temp")[0].click();
    $("#" + $id + "-button-temp").remove();

    // Restore original chart title
    chart_variable.options.title.text = old_title;
    chart_variable.update(0);
}

Customization Tips #

• Text Styling: Tweak font, fillStyle, textAlign, and coordinates to match your design system. For multi-line text, use multiple fillText calls with incremented Y-values.
• Dynamic Content: Replace the hardcoded header/footer text with variables—you could use your existing exportTitle data or pull in other dynamic values like timestamps or source info.
• Transparent Backgrounds: If your chart uses a transparent background, keep the fillRect call to ensure the header/footer areas aren't transparent (or change the color to match your needs).

This approach keeps your original chart's layout intact—all changes are only applied to the exported image, so your on-page chart stays as-is.

内容的提问来源于stack exchange，提问作者Mr Dansk