要使用gRaphael线图设置x轴的日期值,您需要遵循以下步骤:
<div id="chart-container"></div>
var paper = Raphael("chart-container", 800, 400);
function dateToTimestamp(dateString) {
return new Date(dateString).getTime();
}
linechart()
方法创建一个线图实例,并设置x轴和y轴的范围:var x = [dateToTimestamp("2021-01-01"), dateToTimestamp("2021-01-10"), dateToTimestamp("2021-01-20")];
var y = [10, 30, 20];
var linechart = paper.linechart(10, 10, 700, 300, x, y, {});
axis()
方法设置x轴和y轴的标签和刻度:linechart.axis({
x: [dateToTimestamp("2021-01-01"), dateToTimestamp("2021-01-10"), dateToTimestamp("2021-01-20")],
y: [0, 10, 20, 30],
x_labels: ["2021-01-01", "2021-01-10", "2021-01-20"],
y_labels: [0, 10, 20, 30],
});
现在,您应该可以看到一个带有x轴日期值的线图。请注意,您可能需要根据您的数据和需求进行一些调整。
领取专属 10元无门槛券
手把手带您无忧上云