如果你能在X轴上看到 有时间增量6小时 现在,我想将它的刻度更改为 2 小时
昨天刚学这个amchart,不知道怎么用。
这是代码
<script type="text/javascript">
//am4core.useTheme(am4themes_kelly);
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;
chart.data = generateChartData();
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.baseInterval = {
"timeUnit": "minute",
"count": 1
};
dateAxis.tooltipDateFormat = "HH:mm, d MMMM";
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.title.text = "Fin 1";
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "visits";
series.tooltipText = "Stacker: [bold]{valueY}[/]";
series.fillOpacity = 0.3;
chart.cursor = new am4charts.XYCursor();
chart.cursor.lineY.opacity = 0;
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series);
chart.events.on("datavalidated", function () {
dateAxis.zoom({start:0, end:1});
});
function generateChartData() {
var chartData = [];
// current date
var firstDate = new Date();
// now set 12:00 am
firstDate.setHours(0,0,0,0);
// and generate 500 data items
var visits = 0;
for (var i = 0; i < 1442; i++) {
var newDate = new Date(firstDate);
// each time we add one minute
newDate.setMinutes(newDate.getMinutes() + i);
chartData.push({
date: newDate,
visits: visits
});
}
return chartData;
}
</script>
我已经编辑了代码并可以在这里编辑: https://codepen.io/muhammad-syazani/pen/wLrbQE
最佳答案
是的,使用日期轴可能很棘手。即使您已经使用 amCharts v4 一段时间,也可能不清楚如何按照您想要的方式驯服轴。我强烈推荐阅读 our guide on the Date Axis总而言之,这真的很有帮助。该图表基本上会尝试弄清楚如何将频率很好地放入图表中。
您首先要调整的是 dateAxis.renderer.minGridDistance
.默认情况下,它的 120
像素。示例图表有 24 小时,每 2 小时的最小像素间隔为 120px,您的 chart.plotContainer
区域必须为 120 * (24/2)
,或至少 1440px,您的浏览器窗口必须比这更宽。因此,如果我们减少它,我们更有可能适应 2 小时间隔网格。
接下来,这是主要成分,是 dateAxis.gridIntervals
.如果查看生成的文档,您将看到图表将从中选择的间隔列表。每小时或每 3 小时一次,但不是每 2 小时一次。如果我们用间隔为 2 小时的列表替换该列表,如果它适合,图表将使用它。
您还需要在 scrollBarX
的日期轴上执行相同的操作。
相关代码:
dateAxis.renderer.minGridDistance = 75; // 75 * 24/2 == 900 minimum plotContainer width requisite
var gridIntervals = [
{ timeUnit: "millisecond", count: 1 },
{ timeUnit: "millisecond", count: 5 },
{ timeUnit: "millisecond", count: 10 },
{ timeUnit: "millisecond", count: 50 },
{ timeUnit: "millisecond", count: 100 },
{ timeUnit: "millisecond", count: 500 },
{ timeUnit: "second", count: 1 },
{ timeUnit: "second", count: 5 },
{ timeUnit: "second", count: 10 },
{ timeUnit: "second", count: 30 },
{ timeUnit: "minute", count: 1 },
{ timeUnit: "minute", count: 5 },
{ timeUnit: "minute", count: 10 },
{ timeUnit: "minute", count: 30 },
{ timeUnit: "hour", count: 1 },
{ timeUnit: "hour", count: 2 }, // This is the 2-hour interval
{ timeUnit: "hour", count: 3 },
{ timeUnit: "hour", count: 6 },
{ timeUnit: "hour", count: 12 },
{ timeUnit: "day", count: 1 },
{ timeUnit: "day", count: 2 },
{ timeUnit: "day", count: 3 },
{ timeUnit: "day", count: 4 },
{ timeUnit: "day", count: 5 },
{ timeUnit: "week", count: 1 },
{ timeUnit: "month", count: 1 },
{ timeUnit: "month", count: 2 },
{ timeUnit: "month", count: 3 },
{ timeUnit: "month", count: 6 },
{ timeUnit: "year", count: 1 },
{ timeUnit: "year", count: 2 },
{ timeUnit: "year", count: 5 },
{ timeUnit: "year", count: 10 },
{ timeUnit: "year", count: 50 },
{ timeUnit: "year", count: 100 }
];
dateAxis.gridIntervals.setAll(gridIntervals);
chart.scrollbarX.events.on("validated", function() {
chart.scrollbarX.scrollbarChart.xAxes.getIndex(0).gridIntervals.setAll(gridIntervals);
});
fork :
https://codepen.io/team/amcharts/pen/9ba62a5bb5239fee149c2d46bf1e4b81
希望这对您有所帮助!
(顺便说一句 - Salaams!我喜欢这个用户名,这是妖精的尾部引用吗?)
关于javascript - X 轴的固定比例,从不改变 amcharts,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56784014/