在amcharts中更改標題的位置

Question

我用amcharts創建了一個簡單的圖表並設置了一個標題。
是否有可能改變其立場？在我來說，我希望標題是在圖的左邊，甚至在90度角：

這是代碼的摘錄：

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

Here is a fiddle 。

Answer 1

你爲什麼不只是使用label functionality呢？

相反titles，標籤可以在圖表區域，旋轉放置在任何地方的任何文字等

"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" 
}] 

唯一的缺點是，你將需要手動調整圖表的利潤率，以適應他們。圖表不會像標題一樣自動調整邊距。

由於您希望左側的標籤與數值軸相同，所以設置marginLeft將被忽略，因爲軸將嘗試自動計算軸標籤所需的邊距。 （不包括在標籤中）

將數值軸上的ignoreAxisWidth固定爲true。

Here's your Fiddle updated。

Answer 2

如上所述@Lara_Belle您可以使用css進行修改。

您可以添加css轉換爲移動您的文本。我使用nth-child分配css的副標題。請在下面嘗試。

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

你可以只修改變換屬性。 例如：

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

請重現在