在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) 
} 

请重现在