Amcharts4에서 격자선만 제거하고 x축 및 y축 기준선을 유지하려면 어떻게 해야 합니까? Vuejs와 함께 Amcharts를 사용하고 있습니다. 여기 차트 구성 요소의 코드
<template>
<b-card>
<div class="d-flex align-items-center justify-content-between">
<h5>Real Time</h5>
</div>
<div class="real-time-graph mt-4" ref="chartdiv"></div>
</b-card>
</template>
<script>
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
am4core.useTheme(am4themes_animated);
export default {
name: "main-details",
mounted() {
let chart = am4core.create(this.$refs.chartdiv, am4charts.XYChart);
chart.data = [{
"date": "2020-01-01",
"value1": 180,
}, {
"date": "2020-01-08",
"value1": 300,
}, {
"date": "2020-01-15",
"value1": 160,
}, {
"date": "2020-01-22",
"value1": 650,
}, {
"date": "2020-01-29",
"value1": 220,
}, {
"date": "2020-02-05",
"value1": 440,
}, {
"date": "2020-02-12",
"value1": 550,
}, {
"date": "2020-02-19",
"value1": 290,
}, {
"date": "2020-02-26",
"value1": 440,
}, {
"date": "2020-03-04",
"value1": 150,
}, {
"date": "2020-03-11",
"value1": 430,
}];
// Set input format for the dates
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";
chart.numberFormatter.numberFormat = '#,###w';
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.line.disabled = false;
dateAxis.renderer.ticks.template.disabled = true;
dateAxis.renderer.labels.template.fill = am4core.color("#C3CDDD");
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.labels.template.fill = am4core.color("#C3CDDD");
// Create series
var series1 = chart.series.push(new am4charts.StepLineSeries());
series1.dataFields.valueY = "value1";
series1.dataFields.dateX = "date";
series1.strokeWidth = 2;
series1.stroke = "#3AB7FD";
series1.fillOpacity = 1;
var gradient1 = new am4core.LinearGradient();
gradient1.addColor(chart.colors.getIndex(0), 0.2);
gradient1.addColor(chart.colors.getIndex(0), 0);
gradient1.rotation = 90;
series1.fill = gradient1;
}
}
</script>
다음을 사용하여 축과 눈금선이 모두 제거됩니다.
dateAxis.renderer.ticks.template.disabled = true;
valueAxis.renderer.grid.template.disabled = true;
위 코드의 출력 그래프입니다. x 및 y 기본 축을 모두 표시하고 눈금선만 제거해야 합니다.
당신은 설정할 수 있습니다 축 렌더러의 라인 객체의 축 라인을 보여주기 위해 0이 아닌 값으로 strokeOpacity는을 :
dateAxis.renderer.line.strokeOpacity = 1;
valueAxis.renderer.line.strokeOpacity = 1;
데모:
let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [{
"date": "2020-01-01",
"value1": 180,
}, {
"date": "2020-01-08",
"value1": 300,
}, {
"date": "2020-01-15",
"value1": 160,
}, {
"date": "2020-01-22",
"value1": 650,
}, {
"date": "2020-01-29",
"value1": 220,
}, {
"date": "2020-02-05",
"value1": 440,
}, {
"date": "2020-02-12",
"value1": 550,
}, {
"date": "2020-02-19",
"value1": 290,
}, {
"date": "2020-02-26",
"value1": 440,
}, {
"date": "2020-03-04",
"value1": 150,
}, {
"date": "2020-03-11",
"value1": 430,
}];
// Set input format for the dates
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd";
chart.numberFormatter.numberFormat = '#,###w';
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.ticks.template.disabled = true;
dateAxis.renderer.labels.template.fill = am4core.color("#C3CDDD");
dateAxis.renderer.line.strokeOpacity = 1;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.labels.template.fill = am4core.color("#C3CDDD");
valueAxis.renderer.line.strokeOpacity = 1;
// Create series
var series1 = chart.series.push(new am4charts.StepLineSeries());
series1.dataFields.valueY = "value1";
series1.dataFields.dateX = "date";
series1.strokeWidth = 2;
series1.stroke = "#3AB7FD";
series1.fillOpacity = 1;
var gradient1 = new am4core.LinearGradient();
gradient1.addColor(chart.colors.getIndex(0), 0.2);
gradient1.addColor(chart.colors.getIndex(0), 0);
gradient1.rotation = 90;
series1.fill = gradient1;
<script type="text/javascript" src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script type="text/javascript" src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width: 100%; height: 98vh"></div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다