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

を試してみてください？

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

このように@ Laara_Bellecss hackでこれを変更できます。

あなたはテキストを移動するためにcssトランスフォームを追加できます。サブタイトルにcssを割り当てました。nth-childを使用しました。以下を試してください。

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

あなただけのtransformプロパティを変更することができます。 例：

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

なぜあなただ​​けの代わりにlabel functionalityを使用していない今