Изменение цвета линий сетки в amCharts - PullRequest
Новая
       6

Изменение цвета линий сетки в amCharts

1 голос
/ 14 февраля 2020

Я пытаюсь изменить цвета линий (и границ) сетки используемого мной графика. Я видел документы, но нашел только способы изменить fill. Ничего не видно по фактическим строкам.

Демо : 

var chart = am4core.create("dataChart", am4charts.XYChart);

chart.data = [{
    "xValue": "Q1",
    "yValue": 3
}, {
    "xValue": "Q2",
    "yValue": 4
}, {
    "xValue": "Q3",
    "yValue": 7
}, {
    "xValue": "Q4",
    "yValue": 2
}, {
    "xValue": "Q5",
    "yValue": 9
}];

/* Create axes */
var theXAxis = chart.xAxes.push(new am4charts.CategoryAxis());
theXAxis.dataFields.category = "xValue";
theXAxis.renderer.minGridDistance = 30;

/* Create value axis */
var theYAxis = chart.yAxes.push(new am4charts.ValueAxis());
theYAxis.renderer.labels.template.disabled = true;

/* Create series */
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "yValue";
series1.dataFields.categoryX = "xValue";
series1.bullets.push(new am4charts.CircleBullet());
series1.tooltipText = "{valueY} / 10";
series1.fill = "#2c3e96";
series1.fillOpacity = .3;
series1.stroke = "#4967fa";

/* Create a cursor */
chart.cursor = new am4charts.XYCursor();
body{
  background: grey;
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<div id="dataChart"></div>

По линиям я имею в виду эти темно-серые линии сетки.

Есть ли способ изменить это?

1 Ответ

1 голос
/ 15 февраля 2020

В рендерере у вас есть доступ ко многим компонентам оси, таким как метки, метки и, в том числе, линии сетки . Вы можете изменить цвета линий сетки, изменив шаблон сетки. 

theXAxis.renderer.grid.template.stroke = "#ff0000";
theYAxis.renderer.grid.template.stroke = "#ff0000";

Это также продемонстрировано в обзоре осей в документации в разделе Сетка, метки и метки .

Что касается границы, вам нужно установить обводку на фоне соответствующего контейнера (в данном случае plotContainer). Вы можете найти больше информации о работе с контейнерами здесь 

chart.plotContainer.background.stroke = "#ff0000";


var chart = am4core.create("dataChart", am4charts.XYChart);

chart.data = [{
    "xValue": "Q1",
    "yValue": 3
}, {
    "xValue": "Q2",
    "yValue": 4
}, {
    "xValue": "Q3",
    "yValue": 7
}, {
    "xValue": "Q4",
    "yValue": 2
}, {
    "xValue": "Q5",
    "yValue": 9
}];

/* Create axes */
var theXAxis = chart.xAxes.push(new am4charts.CategoryAxis());
theXAxis.dataFields.category = "xValue";
theXAxis.renderer.minGridDistance = 30;
theXAxis.renderer.grid.template.stroke = "#ff0000";
theXAxis.renderer.grid.template.strokeWidth = 2; 
theXAxis.renderer.grid.template.strokeOpacity = .8; //make the change more visible for demo purposes
// base/zero line
theXAxis.renderer.baseGrid.stroke = "#ff0000";

/* Create value axis */
var theYAxis = chart.yAxes.push(new am4charts.ValueAxis());
theYAxis.renderer.labels.template.disabled = true;
theYAxis.renderer.grid.template.stroke = "#ff0000";
theYAxis.renderer.grid.template.strokeWidth = 2; 
theYAxis.renderer.grid.template.strokeOpacity = .8; //make the change more visible for demo purposes
// base/zero line
theYAxis.renderer.baseGrid.stroke = "#ff0000";

//border around chart:
chart.plotContainer.background.stroke = "#ff0000";


/* Create series */
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "yValue";
series1.dataFields.categoryX = "xValue";
series1.bullets.push(new am4charts.CircleBullet());
series1.tooltipText = "{valueY} / 10";
series1.fill = "#2c3e96";
series1.fillOpacity = .3;
series1.stroke = "#4967fa";

/* Create a cursor */
chart.cursor = new am4charts.XYCursor();
body{
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<div id="dataChart"></div>
...