Заполните путь строки amCharts и удалите значения yAxes - PullRequest
Новая
       16

Заполните путь строки amCharts и удалите значения yAxes

0 голосов
/ 13 февраля 2020

Я использую amCharts для создания этого:

enter image description here

У меня возникают следующие проблемы:

  1. Я не могу заставить ярлыки оси Y исчезнуть. Посмотрев документацию , я попробовал theYAxis.disabled = true;
  2. Я хочу, чтобы все под линейным графиком было заполнено синим цветом. На данный момент моя просто показывает линию. Я пробовал: 

var range = xAxis.axisRanges.create();
range.theXAxis.fill = chart.colors.getIndex(8);
range.theXAxis.fillOpacity = 0.2;

Где я ошибаюсь?

Демо : 

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";

// tryin to get line to fill below
//var range = xAxis.axisRanges.create();
//range.theXAxis.fill = chart.colors.getIndex(8);
//range.theXAxis.fillOpacity = 0.2;

/* Create value axis */
var theYAxis = chart.yAxes.push(new am4charts.ValueAxis());
//theYAxis.disabled = true; // . trying to disable . to 1-10 showing here


/* 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";

/* Create a cursor */
chart.cursor = new am4charts.XYCursor();
#dataChart{
  width: 100%;
  height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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 голос
/ 13 февраля 2020

Чтобы удалить метки, вы должны отключить директивы меток на визуализаторе осей, как указано в документации 

theYAxis.renderer.labels.template.disabled = true;

Если вам просто нужна база c заполните под строкой, установите fill и fillOpacity непосредственно на серию. 

series.stroke = "#000088"; //for the line
series.fill = "#000088";  // for the fill
series.fillOpacity = .3;


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";

// tryin to get line to fill below
//var range = xAxis.axisRanges.create();
//range.theXAxis.fill = chart.colors.getIndex(8);
//range.theXAxis.fillOpacity = 0.2;

/* Create value axis */
var theYAxis = chart.yAxes.push(new am4charts.ValueAxis());
//theYAxis.disabled = true; // . trying to disable . to 1-10 showing here
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 = "#000088";
series1.fillOpacity = .3;
series1.stroke = "#000088";

/* Create a cursor */
chart.cursor = new am4charts.XYCursor();
#dataChart{
  width: 100%;
  height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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>
...