Название легенды Amcharts на основе данных даты

У меня есть AmChart, который работает очень хорошо. Он отображает данные на основе даты для сравнения между этим годом и двумя предыдущими годами (данные о продажах).

В настоящее время у меня есть графики с заголовком «год назад», «два года назад» и т. д. Однако владельцы продукта попросили изменить эти заголовки на год (который является динамическим в зависимости от используемого поискового запроса. для создания данных диаграммы). В данных диаграммы есть поле под названием «финансовый год», которое соответствует году, который они искали. Год назад должен был быть «финансовый год» минус 1, и так далее для других меток.

Я не нашел способа динамически изменять НАЗВАНИЕ ЛЕГЕНДЫ на основе данных, представленных в диаграмме. Предложения?

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

Вот пример графика, который у меня сейчас есть. В данных есть поле под названием fiscal_year, которое я хочу использовать в качестве заголовка легенды.

🤔 А знаете ли вы, что...
JavaScript - это скриптовый язык программирования, разработанный Netscape Communications Corporation.


373
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' />