仅在日期范围内的amchars中显示xAxis上的有价值的数据
问题描述 投票：0回答：1
我正在尝试强制在Xaxis标签上显示范围，仅显示日期1/10或10月1日，对于我拥有数据的每个点，我的意思是我想从xaxis中排除自动oct nov jan jan，而仅将有数据的人，我不介意是否没有遵循完美的模式，我只希望日/月出现在我要显示的值的正下方。
我在这里留下了适合该代码段的实际代码...它显示的是月份而不是日期/月份，但是我相信这是由于我要防止的X轴图例的自动渲染。我的自定义日期仅包含数据x轴范围标签。...
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("modalContensfromAjax", am4charts.XYChart);
// Create axes
// var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
//
/**
* Use separate DateFormatter for X axis, so we can set different format
* (this presumes that X axis of type DateAxis was already created)
*/
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.endLocation = 3.5;
dateAxis.renderer.labels.template.horizontalCenter = "right";
dateAxis.renderer.labels.template.verticalCenter = "top";
dateAxis.renderer.labels.template.rotation = 272;
dateAxis.dataFields.category = 'sales';
dateAxis.renderer.minGridDistance = 30;
dateAxis.fontSize = 14;
// // Create series
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "# Incidents ";
var incomingdata ='{"SKATES":[{"date":"2019-10-10","SKATES":1},{"date":"2019-12-16","SKATES":2},{"date":"2020-1-3","SKATES":3},\n' +
'{"date":"2020-1-6","SKATES":4},{"date":"2020-1-7","SKATES":5},{"date":"2020-1-9","SKATES":6},{"date":"2020-1-13","SKATES":8},{"date":"2020-1-15","SKATES":9},{"date":"2020-1-23","SKATES":11},\n' +
'{"date":"2020-1-27","SKATES":12},{"date":"2020-1-28","SKATES":13},{"date":"2020-1-29","SKATES":23}],\n' +
'"SHIPS":[{"date":"2019-11-24","SHIPS":1},{"date":"2019-12-13","SHIPS":2},{"date":"2020-1-6","SHIPS":3},{"date":"2020-1-21","SHIPS":4},{"date":"2020-1-22","SHIPS":6},{"date":"2020-1-24","SHIPS":7},\n' +
'{"date":"2020-1-29","SHIPS":11}],"CARS":[{"date":"2019-11-26","CARS":1},{"date":"2019-12-23","CARS":2},{"date":"2020-1-13","CARS":3}],\n' +
'"MOTORCICLES":[{"date":"2019-12-19","MOTORCICLES":1},{"date":"2020-1-23","MOTORCICLES":2},{"date":"2020-1-28","MOTORCICLES":3},{"date":"2020-1-29","MOTORCICLES":6}],\n' +
'"BICICLES":[{"date":"2020-1-24","BICICLES":1}]}';
var aResult = $.parseJSON(incomingdata);
$.each(aResult, function(key, value) {
createSeries( key, "Series #" + key,value)
});
function createSeries(s, name,seriesVal) {
var series = chart.series.push(new am4charts.LineSeries());
var bullet = series.bullets.push(new am4charts.CircleBullet());
var valueLabel = series.bullets.push(new am4charts.LabelBullet());
valueLabel.label.text = "{valueY}";
valueLabel.label.fontSize = 20;
valueLabel.label.y = -13.5;
bullet.fill = am4core.color("#3f5163");
bullet.fillOpacity = 1;
bullet.strokeWidth = 2;
bullet.circle.radius = 4;
series.dataFields.valueY = s;
series.dataFields.dateX = "date";
series.dataFields.dateX.showTooltipOn = "always";
series.dataFields.dateX.dateFormatter = new am4core.DateFormatter();
series.dataFields.dateX.dateFormat = "yyyy-MM-dd";
// Create series
series.name = name;
var segment = series.segments.template;
segment.interactionsEnabled = true;
var hoverState = segment.states.create("hover");
hoverState.properties.strokeWidth = 6;
var dimmed = segment.states.create("dimmed");
dimmed.properties.stroke = am4core.color("#dadada");
segment.events.on("over", function(event) {
processOver(event.target.parent.parent.parent);
});
segment.events.on("out", function(event) {
processOut(event.target.parent.parent.parent);
});
series.data = eval(seriesVal);
return series;
}
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.legend = new am4charts.Legend();
chart.legend.position = "right";
chart.legend.scrollable = true;
chart.legend.itemContainers.template.events.on("over", function(event) {
processOver(event.target.dataItem.dataContext);
})
chart.legend.itemContainers.template.events.on("out", function(event) {
processOut(event.target.dataItem.dataContext);
})
function processOver(hoveredSeries) {
hoveredSeries.toFront();
hoveredSeries.segments.each(function(segment) {
segment.setState("hover");
})
chart.series.each(function(series) {
if (series != hoveredSeries) {
series.segments.each(function(segment) {
segment.setState("dimmed");
})
series.bulletsContainer.setState("dimmed");
}
});
}
function processOut(hoveredSeries) {
chart.series.each(function(series) {
series.segments.each(function(segment) {
segment.setState("default");
})
series.bulletsContainer.setState("default");
});
}
}); // end am4core.ready()<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<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>
</head>
<body>
<div id="modalContensfromAjax">
</div>
</body>
</html>1个回答
0
投票
投票
DateAxis具有该属性：skipEmptyPeriods。
skipEmptyPeriods它将删除无数据的日子。
dateAxis.skipEmptyPeriods = true;
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("modalContensfromAjax", am4charts.XYChart);
// Create axes
// var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
//
/**
* Use separate DateFormatter for X axis, so we can set different format
* (this presumes that X axis of type DateAxis was already created)
*/
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.endLocation = 3.5;
dateAxis.renderer.labels.template.horizontalCenter = "right";
dateAxis.renderer.labels.template.verticalCenter = "top";
dateAxis.renderer.labels.template.rotation = 272;
dateAxis.dataFields.category = 'sales';
dateAxis.renderer.minGridDistance = 30;
dateAxis.fontSize = 14;
dateAxis.skipEmptyPeriods = true;
// // Create series
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "# Incidents ";
var incomingdata ='{"SKATES":[{"date":"2019-10-10","SKATES":1},{"date":"2019-12-16","SKATES":2},{"date":"2020-1-3","SKATES":3},\n' +
'{"date":"2020-1-6","SKATES":4},{"date":"2020-1-7","SKATES":5},{"date":"2020-1-9","SKATES":6},{"date":"2020-1-13","SKATES":8},{"date":"2020-1-15","SKATES":9},{"date":"2020-1-23","SKATES":11},\n' +
'{"date":"2020-1-27","SKATES":12},{"date":"2020-1-28","SKATES":13},{"date":"2020-1-29","SKATES":23}],\n' +
'"SHIPS":[{"date":"2019-11-24","SHIPS":1},{"date":"2019-12-13","SHIPS":2},{"date":"2020-1-6","SHIPS":3},{"date":"2020-1-21","SHIPS":4},{"date":"2020-1-22","SHIPS":6},{"date":"2020-1-24","SHIPS":7},\n' +
'{"date":"2020-1-29","SHIPS":11}],"CARS":[{"date":"2019-11-26","CARS":1},{"date":"2019-12-23","CARS":2},{"date":"2020-1-13","CARS":3}],\n' +
'"MOTORCICLES":[{"date":"2019-12-19","MOTORCICLES":1},{"date":"2020-1-23","MOTORCICLES":2},{"date":"2020-1-28","MOTORCICLES":3},{"date":"2020-1-29","MOTORCICLES":6}],\n' +
'"BICICLES":[{"date":"2020-1-24","BICICLES":1}]}';
var aResult = $.parseJSON(incomingdata);
$.each(aResult, function(key, value) {
createSeries( key, "Series #" + key,value)
});
function createSeries(s, name,seriesVal) {
var series = chart.series.push(new am4charts.LineSeries());
var bullet = series.bullets.push(new am4charts.CircleBullet());
var valueLabel = series.bullets.push(new am4charts.LabelBullet());
valueLabel.label.text = "{valueY}";
valueLabel.label.fontSize = 20;
valueLabel.label.y = -13.5;
bullet.fill = am4core.color("#3f5163");
bullet.fillOpacity = 1;
bullet.strokeWidth = 2;
bullet.circle.radius = 4;
series.dataFields.valueY = s;
series.dataFields.dateX = "date";
series.dataFields.dateX.showTooltipOn = "always";
series.dataFields.dateX.dateFormatter = new am4core.DateFormatter();
series.dataFields.dateX.dateFormat = "yyyy-MM-dd";
// Create series
series.name = name;
var segment = series.segments.template;
segment.interactionsEnabled = true;
var hoverState = segment.states.create("hover");
hoverState.properties.strokeWidth = 6;
var dimmed = segment.states.create("dimmed");
dimmed.properties.stroke = am4core.color("#dadada");
segment.events.on("over", function(event) {
processOver(event.target.parent.parent.parent);
});
segment.events.on("out", function(event) {
processOut(event.target.parent.parent.parent);
});
series.data = eval(seriesVal);
return series;
}
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.legend = new am4charts.Legend();
chart.legend.position = "right";
chart.legend.scrollable = true;
chart.legend.itemContainers.template.events.on("over", function(event) {
processOver(event.target.dataItem.dataContext);
})
chart.legend.itemContainers.template.events.on("out", function(event) {
processOut(event.target.dataItem.dataContext);
})
function processOver(hoveredSeries) {
hoveredSeries.toFront();
hoveredSeries.segments.each(function(segment) {
segment.setState("hover");
})
chart.series.each(function(series) {
if (series != hoveredSeries) {
series.segments.each(function(segment) {
segment.setState("dimmed");
})
series.bulletsContainer.setState("dimmed");
}
});
}
function processOut(hoveredSeries) {
chart.series.each(function(series) {
series.segments.each(function(segment) {
segment.setState("default");
})
series.bulletsContainer.setState("default");
});
}
}); // end am4core.ready()最新问题
- 如何使用javascript从HTML标签/文本中获取正确的unicode？
- .Net 6 工作者服务 EF 6 - 存储库 DI 无法使用作用域服务
- 这个聊天应用程序有什么办法可以工作吗？
- 如何将 C# 的带有字节数组的 Guid 构造函数转换为 SQL Server 标量函数？
- 无法在 MacOS Ventura 13.0 上安装 pyenv
- 在两个文件之间使用变量
- MAUI：当前不支持到 shell 元素的相对路由
- @ContentChild() 如何能够在 v12 中接受注入令牌，但在 v14 中却不能？
- Python 虚拟环境停止工作
- 并行化代码时如何保存两个单独的 CSV？
- 如何使用 Go 连接到 Socket.IO NodeJS 服务器？
- 类型错误：无法读取未定义的属性（读取“0”）打开ai
- 在 Flutter Web 应用程序的管理页面中显示主要内容时遇到问题
- @ServiceActivator(inputChannel = "[topic].[group].errors") 注释会导致“是否存在无法解析的循环引用异常？”
- 我们可以在 js 块或 .js 文件中使用 Promise 吗？
- 如何根据相关值重新分组行
- 如何使用空手道匹配 API 响应具有可能值之一？
- Electron Preload - Quasar 2 组件的上下文桥接事件
- 亚马逊有提供API来获取普通用户的所有订单详情吗？
- 单字符元素的空间差异：List<Character> 与 List<String>
© www.soinside.com 2019 - 2024. All rights reserved.