Position des Titels in Amcharts ändern

Ich habe einen einfachen Graphen mit amcharts erstellt und einen Titel festgelegt.
Ist es möglich, seine Position zu ändern? In meinem Fall mag ich den Titel auf der linken Seite des Diagramms sein, vielleicht sogar in einem Winkel von 90 Grad:Position des Titels in Amcharts ändern

Dies ist ein Auszug aus dem Code:

var chart = AmCharts.makeChart("chartdiv", { 
    "type": "serial", 
    //.. 
    , "titles": [{ 
    "text": "My Chart Title" 
    }, { 
    "text": "My Chart Sub-Title", 
    "bold": false 
    }] 
});

Here is a fiddle .

Quelle

2017-02-01 user1170330

Überschreiben Sie die CSS des Plugins. –

Zugriff mit .amcharts-title {} –

@CarolMcKay: Ich habe bereits versucht mit '.amcharts-title { float: left; Position: absolut; links: 0; } ', aber es hat nichts geändert. – user1170330

Warum Sie nicht nur label functionality stattdessen verwenden?

Im Gegensatz zu titles können Etiketten beliebigen Text irgendwo im Diagrammbereich platziert sein, gedreht usw.

"allLabels": [{ 
    "text": "My Chart Title", 
    "bold": true, 
    "x": 10, 
    "y": "50%", 
    "rotation": 270, 
    "width": "100%", 
    "align": "middle" 
}, { 
    "text": "My Chart Sub-Title", 
    "bold": false, 
    "x": 30, 
    "y": "50%", 
    "rotation": 270, 
    "width": "100%", 
    "align": "middle" 
}]

Der einzige Nachteil ist, dass Sie manuell benötigen, um Diagramm die Margen einstellen für sie aufzunehmen. Das Diagramm passt Ränder nicht wie bei Titeln automatisch an.

Da die Beschriftungen auf der linken Seite der Wertachse entsprechen sollen, wird die Einstellung marginLeft ignoriert, da die Achse versucht, den für die Achsenbeschriftungen benötigten Rand automatisch zu berechnen. (in den Etiketten nicht mitgerechnet)

Um diesen Satz ignoreAxisWidth auf der Wertachse zu true zu beheben.

Here's your Fiddle updated.

Quelle

2017-02-02 06:09:20 martynasma

Bitte beachten Sie mein Update. Ich möchte, dass der Titel an der Seite des Diagramms steht. – user1170330

Aktualisiert meine Antwort und Geige. – martynasma

Wie gesagt @Lara_Belle können Sie dies mit css Hack ändern.

Sie können css umwandeln, um Ihren Text zu verschieben. Ich habe nth-child für assign css auf Untertitel verwendet. Bitte versuchen Sie es unten.

var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "serial", 
 
    "theme": "light", 
 
    "marginRight": 70, 
 
    "dataProvider": [{ 
 
    "country": "USA", 
 
    "visits": 3025, 
 
    "color": "#FF0F00" 
 
    }, { 
 
    "country": "China", 
 
    "visits": 1882, 
 
    "color": "#FF6600" 
 
    }, { 
 
    "country": "Japan", 
 
    "visits": 1809, 
 
    "color": "#FF9E01" 
 
    }, { 
 
    "country": "Germany", 
 
    "visits": 1322, 
 
    "color": "#FCD202" 
 
    }, { 
 
    "country": "UK", 
 
    "visits": 1122, 
 
    "color": "#F8FF01" 
 
    }, { 
 
    "country": "France", 
 
    "visits": 1114, 
 
    "color": "#B0DE09" 
 
    }, { 
 
    "country": "India", 
 
    "visits": 984, 
 
    "color": "#04D215" 
 
    }, { 
 
    "country": "Spain", 
 
    "visits": 711, 
 
    "color": "#0D8ECF" 
 
    }, { 
 
    "country": "Netherlands", 
 
    "visits": 665, 
 
    "color": "#0D52D1" 
 
    }, { 
 
    "country": "Russia", 
 
    "visits": 580, 
 
    "color": "#2A0CD0" 
 
    }, { 
 
    "country": "South Korea", 
 
    "visits": 443, 
 
    "color": "#8A0CCF" 
 
    }, { 
 
    "country": "Canada", 
 
    "visits": 441, 
 
    "color": "#CD0D74" 
 
    }], 
 
    "valueAxes": [{ 
 
    "axisAlpha": 0, 
 
    "position": "left", 
 
    "title": "Visitors from country" 
 
    }], 
 
    "startDuration": 1, 
 
    "graphs": [{ 
 
    "balloonText": "<b>[[category]]: [[value]]</b>", 
 
    "fillColorsField": "color", 
 
    "fillAlphas": 0.9, 
 
    "lineAlpha": 0.2, 
 
    "type": "column", 
 
    "valueField": "visits" 
 
    }], 
 
    "chartCursor": { 
 
    "categoryBalloonEnabled": false, 
 
    "cursorAlpha": 0, 
 
    "zoomable": false 
 
    }, 
 
    "categoryField": "country", 
 
    "categoryAxis": { 
 
    "gridPosition": "start", 
 
    "labelRotation": 45 
 
    }, 
 
    "export": { 
 
    "enabled": true 
 
    }, "titles": [{ 
 
    "text": "My Chart Title" 
 
    }, { 
 
    "text": "My Chart Sub-Title", 
 
    "bold": false 
 
    }] 
 

 
});

#chartdiv { 
 
    width: 100%; 
 
    height: 500px; 
 
} 
 

 
.amcharts-export-menu-top-right { 
 
    top: 10px; 
 
    right: 0; 
 
} 
 
text{ 
 
    margin: 50px; 
 
} 
 

 
.amcharts-title{ 
 
    transform: translate(145px,30px) 
 
} 
 
.amcharts-title:nth-child(2){ 
 
    transform: translate(134px, 10px) 
 
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> 
 
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> 
 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<div id="chartdiv"></div>

UPADATE

Sie können nur die Eigenschaft Transformation ändern. ex:

.amcharts-title{ 
    transform: translate(145px,30px) 
} 
.amcharts-title:nth-child(2){ 
    transform: translate(134px, 10px) 
}

Bitte versuchen Sie es jetzt

Quelle

2017-02-01 08:35:05

Danke, aber ich meinte nicht ** ausrichten links **, aber ** links von der Karte **. Gleich neben 'Besucher aus Land'. – user1170330

Sie können nur die Eigenschaft transform ändern. Bitte versuchen Sie das Update –

Bitte sehen Sie mein Update.Ich möchte, dass der Titel an der Seite des Diagramms steht. – user1170330

Position des Titels in Amcharts ändern

Antwort

Verwandte Themen