如何在AmCharts生成的图表中添加自定义文本内容？

Hey there! I get it—you want to add custom text annotations to your AmCharts chart, just like you’d manually insert text boxes in Excel. The good news is AmCharts has a built-in Label component that lets you do exactly this. Let’s modify your existing code to include these text elements.

Step-by-Step Solution #

AmCharts allows you to define custom labels directly in your chart configuration using the labels array. Each label can be positioned precisely, styled, and contain any text you need. Here’s how to update your code:

Modified Code with Custom Labels #

var chart = AmCharts.makeChart("chartdiv", { 
    "theme": "light", 
    "type": "serial", 
    "dataProvider": [ 
        { "year": "-----Oxytocin creating behaviours----------", "income":0 }, 
        { "year": "Curious", "income": <?=$q1?> }, 
        { "year": "Compassionate", "income": <?=$q2?> }, 
        { "year": "Trusting", "income": <?=$q3?> }, 
        { "year": "Courageus", "income": <?=$q4?> }, 
        { "year": "Collaborative", "income": <?=$q5?> }, 
        { "year": "", "income": 0 }, 
        { "year": "-----Oxytocin creating behaviours--------", "income":0 }, 
        { "year": "Convinced/Closed", "income":<?=$q6?>, "color": "#6FE771" }, 
        { "year": "Isolated", "income": <?=$q7?>, "color": "#6FE771" }, 
        { "year": "Suspicious", "income":<?=$q8?>, "color": "#6FE771" }, 
        { "year": "Threatened", "income": <?=$q9?>, "color": "#6FE771" }, 
        { "year": "Disconnected", "income": <?=$q10?>, "color": "#6FE771" }, 
        { "year": "", "income": 0 }, 
    ], 
    "valueAxes": [{ "title": "Conversational Intelligence - Self assessment", "minimum": 0, "maximum": 5 }], 
    "graphs": [{ "balloonText": "Income in [[category]]:[[value]]", "fillAlphas": 1, "lineAlpha": 0.2, "title": "Income", "type": "column", "valueField": "income", "colorField": "color" }], 
    "depth3D": 0, "angle": 30, "rotate": true, "categoryField": "year", 
    "categoryAxis": { "gridPosition": "start", "fillAlpha": 0.05, "position": "left" }, 
    "export": { "enabled": true },
    // Add custom labels here
    "labels": [
        {
            "text": "Your Custom Title or Note",
            "x": "5%", // Horizontal position (use % for responsiveness, or fixed pixels like 20)
            "y": "10%", // Vertical position
            "fontSize": 16,
            "color": "#222",
            "bold": true,
            "align": "left"
        },
        {
            "text": "Note: Ratings are 0-5",
            "x": "95%",
            "y": "90%",
            "fontSize": 12,
            "color": "#666",
            "align": "right"
        }
    ]
});

Key Tips for Working with Labels #

• Positioning: Since your chart has rotate: true, the coordinate system is rotated—you’ll need to tweak x and y values to get text in the right spot. Percentages work best for responsive charts, but fixed pixel values are fine for static sizing.
• Styling: Customize fontSize, color, fontFamily, bold, italic, and more to match your chart’s theme.
• Dynamic Text: If you need text tied to your data, use placeholders like [[value]] or [[category]], or define a textFunction to generate text dynamically based on chart data.

Example for Contextual Annotations #

If you wanted to highlight a specific section of your chart, you could add a targeted label like this:

"labels": [
    {
        "text": "Oxytocin-boosting traits",
        "x": "20%",
        "y": "40%",
        "fontSize": 13,
        "color": "#2d72bc"
    }
]

Just adjust the x and y values until the text sits exactly where you want it relative to your chart columns.

内容的提问来源于stack exchange，提问作者Danyal Sandeelo