javascript - Google Charts:如何自定义轴上显示的日期格式?
问题描述
我在此处遵循有关轴自定义的文档,但它没有说明如何在 AXES 上自定义日期格式,仅在列上。
我需要我的轴格式为“dd/MM/yy”,但无法实现如此简单的任务......
这是代码笔
google.charts.load("current", {
packages: ["line"]
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Date", "A", "B", "C", "D", "E", "F"],
[new Date(2006, 1, 1), 5394, 5014, 2480, 9380, 4852, 7128],
[new Date(2006, 1, 8), 5697, 5147, 2480, 9187, 7644, 7134],
[new Date(2006, 1, 16), 5780, 5192, 2480, 8941, 7729, 7148],
[new Date(2006, 1, 25), 5993, 5211, 2480, 8750, 7768, 7151],
[new Date(2006, 2, 2), 6207, 5282, 2480, 8636, 7827, 7195],
[new Date(2006, 2, 11), 6334, 5361, 2548, 8515, 7874, 7140],
[new Date(2006, 2, 16), 6687, 5346, 2566, 8347, 7895, 7131],
[new Date(2006, 2, 28), 6967, 5398, 2802, 8220, 7831, 7141],
[new Date(2006, 3, 1), 7061, 5419, 2818, 8198, 7827, 7031],
[new Date(2006, 3, 2), 7335, 5457, 2829, 8211, 7959, 6966]
]);
var options = {
chart: { title: "my graph" },
curveType: "function",
legend: { position: "none" },
axes: {
x: {
0: { side: "top", label: "axes label", format: "dd/MM/yy", color: "red" }
}
},
hAxis: { format: "dd/MM/yyyy" },
vAxis: { format: "MMM d, y" }
};
var chart = new google.charts.Line(document.getElementById("curve_chart"));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="curve_chart"></div>
</div>
</div>
</div>
解决方案
有几个选项不受材料图表的支持。
请参阅 -->物料图表功能奇偶校验的跟踪问题
材料图 --> google.charts.Line
--packages: ["line"]
经典图表 --> google.visualization.LineChart
--packages: ["corechart"]
对于材质图表支持的选项,
您需要在绘制图表之前 将这些选项转换为材质选项...
google.charts.Line.convertOptions(options)
请参阅以下工作片段...
google.charts.load("current", {
packages: ["line"]
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Date", "A", "B", "C", "D", "E", "F"],
[new Date(2006, 1, 1), 5394, 5014, 2480, 9380, 4852, 7128],
[new Date(2006, 1, 8), 5697, 5147, 2480, 9187, 7644, 7134],
[new Date(2006, 1, 16), 5780, 5192, 2480, 8941, 7729, 7148],
[new Date(2006, 1, 25), 5993, 5211, 2480, 8750, 7768, 7151],
[new Date(2006, 2, 2), 6207, 5282, 2480, 8636, 7827, 7195],
[new Date(2006, 2, 11), 6334, 5361, 2548, 8515, 7874, 7140],
[new Date(2006, 2, 16), 6687, 5346, 2566, 8347, 7895, 7131],
[new Date(2006, 2, 28), 6967, 5398, 2802, 8220, 7831, 7141],
[new Date(2006, 3, 1), 7061, 5419, 2818, 8198, 7827, 7031],
[new Date(2006, 3, 2), 7335, 5457, 2829, 8211, 7959, 6966]
]);
var options = {
chart: { title: "my graph" },
curveType: "function",
legend: { position: "none" },
axes: {
x: {
0: { side: "top", label: "axes label", format: "dd/MM/yy", color: "red" }
}
},
hAxis: { format: "dd/MM/yyyy" }
};
var chart = new google.charts.Line(document.getElementById("curve_chart"));
chart.draw(data, google.charts.Line.convertOptions(options));
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="curve_chart"></div>
</div>
</div>
</div>
注意:在上图中,y 轴包含数字,
日期格式不适用于vAxis
...
vAxis: { format: "MMM d, y" } // <-- removed from above snippet
编辑
加载谷歌图表时,默认语言环境是 -->'en'
要加载不同的语言环境,请在load
语句中指定语言...
google.charts.load("current", {
packages: ["line"],
language: "fr"
});
推荐阅读
- python - Python将srt文件转换为csv文件
- c# - SSIS - Freshdesk 的 REST API
- android - 自定义 AOSP 的开发人员如何将其更改置于版本控制之下?
- sql - 查询以从数据库中获取每个表的最大插入标记
- python - Celery-Django,开始和停止调查的提醒电子邮件
- python - 由于时区,在 django 中查询日期时间对象不起作用
- reactjs - 无法查看选项卡内容
- vba - 如何解决由 .PasteSpecial 引起的编译错误?
- javascript - Discord JS:如何删除机器人在 DM 中发送的所有消息?
- wordpress - 如何在 Azure 中托管的 Wordpress 站点上获取数据库信息?