Question

我使用https://our.umbraco.org/forum/using-umbraco-and-getting-started/82257-unable-to-log-into-backoffice-greeted-with-a-white-screen-log-shows-invalid-cast-exception创建了一个简单的图表并设置了标题是否有可能改变其立场？在我的情况下，我希望标题位于图表的左侧，甚至可能是90度的角度：

amcharts

这是代码的摘录：

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

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 。请尝试以下。

＆＃13;

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
  }]

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

<强> UPADATE

您只需修改转换属性即可。例如：

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

请立即尝试

在amcharts中更改标题的位置

2 个答案: