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

Question

我有一个运行良好的 AmChart。它显示基于日期的数据，以便对今年与前两年(销售数据)进行比较。

目前，我有标题为“一年前”、“两年前”等的图表。但是，产品所有者要求将这些标题更改为年份(根据搜索动态变化)他们用来生成图表数据的查询)。图表数据有一个名为“财政年度”的字段，它对应于他们搜索的年份。一年前需要将“财政年度”减 1，其他标签依此类推。

我还没有找到一种方法来根据提供给图表的数据动态修改图例标题。有建议吗？

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

这是我当前拥有的图表的一个 fiddle 示例。该数据有一个名为 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' />