javascript - 填充 amCharts 行路径并移除 yAxes 值
问题描述
我正在使用 amCharts 创建这个:
我有以下问题:
- 我无法让 y 轴标签消失。查看文档后,我尝试过
theYAxis.disabled = true;
- 我希望折线图下方的所有内容都填充为蓝色。目前,我的只是显示一条线。我试过了:
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>
解决方案
为了删除标签,您必须直接禁用轴渲染器上的标签,如文档中所述
theYAxis.renderer.labels.template.disabled = true;
如果您只需要线条下方的基本填充,请直接在系列上设置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>
推荐阅读
- c# - why is my call to CountCharsAsync blocking the UI?
- c++ - 尝试使用对 protobuffers 2.6.1 和 3.4.1 的引用来编译代码
- redis - Redis 立即保存到磁盘,即使配置为不
- android - 如何修复设计Android?
- python - 每次迭代存储不同变量的循环?
- apache - SSL 库错误(键值不匹配),但证书文件确实匹配
- r - 将数值批量转换为因子
- javascript - Gulp 中的 ES6 模块
- java - 将 jar 运行到苹果脚本中
- ruby-on-rails - 在哪里放置 ruby 助手 Sendgrid V3 发送 API