时间戳

首页 > 解决方案 > 基于日期数据的 Amcharts 图例标题

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

问题描述

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

目前，我有标题为“一年前”、“两年前”等的图表。但是，产品所有者要求将这些标题更改为年份（这取决于他们使用的搜索查询是动态的生成图表数据）。图表数据有一个名为“会计年度”的字段，对应于他们搜索的年份。一年前需要“会计年度”减 1，其他标签以此类推。

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

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

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

标签： javascriptamcharts

解决方案

除了在创建图表之前预先设置这些标题之外，没有其他方法可以使其动态化。如果您的设置总是与第一个表示之后的图形对象相同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' />

推荐阅读