У меня есть AmChart, который работает очень хорошо. Он отображает данные на основе даты для сравнения между этим годом и двумя предыдущими годами (данные о продажах).
В настоящее время у меня есть графики с заголовком «год назад», «два года назад» и т. д. Однако владельцы продукта попросили изменить эти заголовки на год (который является динамическим в зависимости от используемого поискового запроса. для создания данных диаграммы). В данных диаграммы есть поле под названием «финансовый год», которое соответствует году, который они искали. Год назад должен был быть «финансовый год» минус 1, и так далее для других меток.
Я не нашел способа динамически изменять НАЗВАНИЕ ЛЕГЕНДЫ на основе данных, представленных в диаграмме. Предложения?
https://jsfiddle.net/6sxf3Ldz/8/
Вот пример графика, который у меня сейчас есть. В данных есть поле под названием fiscal_year
, которое я хочу использовать в качестве заголовка легенды.
🤔 А знаете ли вы, что...
JavaScript - это скриптовый язык программирования, разработанный Netscape Communications Corporation.
Невозможно сделать его динамичным, кроме как заранее установить эти заголовки перед созданием диаграммы. Если ваша установка всегда будет одинаковой с объектами графа после первого, представляющего 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' />