Question

我有一个运行良好的AmChart。它显示基于日期的数据，以便在今年和前两年之间进行比较（销售数据）。

当前，我的图表标题为“一年前”，“两年前”等。但是，产品所有者要求将这些标题更改为年份（根据搜索的动态变化）查询他们用来生成图表数据）。图表数据具有一个称为“会计年度”的字段，该字段对应于他们搜索的年份。一年前的“会计年度”必须减去1，以此类推。对于其他标签，依此类推。

我还没有找到根据提供给图表的数据动态修改LEGEND TITLE的方法。有建议吗？

https://jsfiddle.net/6sxf3Ldz/8/

这是我当前拥有的图表的一个小提琴示例。数据有一个名为fiscal_year的字段，我想用作图例标题。

Answer 1

除了在创建图表之前预先设置这些标题之外，没有其他方法可以使它动态化。如果您的设置始终与第一个表示fiscal_year - x的图形对象之后的图形对象相同，则只需循环遍历它们并应用所需的标签，然后再调用makeChart：

var graphs = [/* your graph array */];
for (var i = 1; i < graphs.length; ++i) {
    graphs[i].title = chartData[0].fiscal_year - i;
}
AmCharts.makeChart("canvas", {
  // ...
  graphs: graphs,
  // ...
});

演示：

var chartData = [{
  "datestamp": "01\/01\/2018",
  "fiscal_week": "1",
  "fiscal_year": "2018",
  "fiscal_month": "1",
  "depletions": null,
  "prior_year": "0",
  "two_years": "0",
  "three_years": "0"
}, {
  "datestamp": "01\/07\/2018",
  "fiscal_week": "2",
  "fiscal_year": "2018",
  "fiscal_month": "1",
  "depletions": null,
  "prior_year": "0",
  "two_years": "0",
  "three_years": "0"
}, {
  "datestamp": "01\/14\/2018",
  "fiscal_week": "3",
  "fiscal_year": "2018",
  "fiscal_month": "1",
  "depletions": null,
  "prior_year": "0",
  "two_years": "0",
  "three_years": "0"
}, {
  "datestamp": "01\/21\/2018",
  "fiscal_week": "4",
  "fiscal_year": "2018",
  "fiscal_month": "1",
  "depletions": "5",
  "prior_year": "0",
  "two_years": "0",
  "three_years": "0"
}, {
  "datestamp": "01\/28\/2018",
  "fiscal_week": "5",
  "fiscal_year": "2018",
  "fiscal_month": "2",
  "depletions": "1",
  "prior_year": "0",
  "two_years": "0",
  "three_years": "0"
}, {
  "datestamp": "02\/04\/2018",
  "fiscal_week": "6",
  "fiscal_year": "2018",
  "fiscal_month": "2",
  "depletions": null,
  "prior_year": "0",
  "two_years": "0",
  "three_years": "0"
}, {
  "datestamp": "02\/11\/2018",
  "fiscal_week": "7",
  "fiscal_year": "2018",
  "fiscal_month": "2",
  "depletions": null,
  "prior_year": "0",
  "two_years": "0",
  "three_years": "0"
}, {
  "datestamp": "02\/18\/2018",
  "fiscal_week": "8",
  "fiscal_year": "2018",
  "fiscal_month": "2",
  "depletions": null,
  "prior_year": "0",
  "two_years": "0",
  "three_years": "0"
}];
var graphs = [{
    "id": "d1",
    "title": "Depletions",
    "type": "column",
    "valueField": "depletions",
    "valueAxis": "v1",
    "fillAlphas": .8,
    "lineColor": "#2c7fb8",
    "fillColors": "#2c7fb8",
    "clustered": false,
  },
  {
    "id": "p1",
    "type": "column",
    "title": "One Year Ago", // How can I make this label display the fiscal year - 1 based on the data? 
    "valueField": "prior_year",
    "lineColor": "#253494",
    "fillColors": "#253494",
    fillAlphas: .8,
    "clustered": false,
  },
  {
    "id": "p2",
    "type": "column",
    "title": "Two Years Ago", // How can I make this label display the fiscal year - 2 based on the data?
    "valueField": "two_years",
    "lineColor": "#41b6c4",
    "fillColors": "#41b6c4",
    fillAlphas: .8,
    "hidden": true,
    "clustered": false,
  },
  {
    "id": "p3",
    "type": "column",
    "title": "Three Years Ago", // How can I make this label display the fiscal year - 3 based on the data?
    "valueField": "three_years",
    "lineColor": "#a1dab4",
    "fillColors": "#a1dab4",
    fillAlphas: .8,
    "hidden": true,
    "clustered": false,
  },
];

for (var i = 1; i < graphs.length; ++i) {
  graphs[i].title = chartData[0].fiscal_year - i;
}
var chart = AmCharts.makeChart("canvas", {
  "type": "serial",
  "categoryField": "datestamp",
  "dataDateFormat": "MM/DD/YYYY",
  "borderColor": "#000000",
  "balloonDateFormat": "Week W, YYYY",
  "chartCursor": {
    "cursorAlpha": 0,
    "valueLineEnabled": true,
    "valueLineAlpha": .2,
    "cursorColor": "#000000",
    "valueLineBalloonEnabled": true,
  },
  "categoryAxis": {
    "parseDates": false,
    "centerLabels": true,
  },
  "dataProvider": chartData,
  "graphs": graphs,
  "legend": {
    "useGraphSettings": true,
  },
  "valueAxes": [{
    "id": "v1",
    "title": "Units",
    "minimum": 0,
  }],
  "export": {
    //"enabled": true,
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.13/amcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.13/serial.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.13/plugins/export/export.min.js"></script>
<link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.3/plugins/export/export.css">
<div class='row'>
  <div id="canvas" class='col-md-12' style="height: 450px; border: 3px solid #ccc;"></div>
</div>
<br class='clearfix' />

基于日期数据的Amcharts图例标题

1 个答案: