英文:
Customzing ticks/dates on horizontal axis - Google Charts via wpDataTables
问题
我正在通过WP插件wpDataTables（wpDataCharts）在我的网站上插入Google折线图。我正在使用Elementor来构建网站。您可以在页面下方看到图表，链接在这里。
wpDataTables只提供了有限数量的图表选项，您可以根据Google API的规定进行调整。如果您想进一步进行更改，可以使用回调函数。
我已经使用回调函数来移除Google默认添加的填充（这使得图表只填充容器的50%），并且使工具提示包括两个图形。工作代码如下：
<script type="text/javascript">
jQuery(window).on('load',function(){
if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
wpDataChartsCallbacks[4] = function(obj){
obj.options.chartArea = {left:135,top:30,width:'100%',height:'75%'};
obj.options.focusTarget = ['category'];
}
});
</script>
然而，我想要控制水平轴上显示的刻度/日期。我已经查看了Google API文档，并找到了我认为需要的对象（hAxis.ticks），但我无论如何都无法使其起作用。无论我做什么，它对显示的日期没有任何影响。
以下是我认为是最佳代码，但它不起作用：
<script type="text/javascript">
jQuery(window).on('load',function(){
if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
wpDataChartsCallbacks[4] = function(obj){
obj.options.hAxis.ticks = [{v: new Date(2020, 1, 1), f: '2020'}, {v: new Date(2021, 1, 1), f: '2021'}, {v: new Date(2022, 1, 1), f: '2022'}, {v: new Date(2023, 1, 1), f: '2023'}];
}
});
</script>
非常感谢您的帮助。请注意，我没有编程背景，所以我可能犯了很多“简单”的错误，使用了错误的编程术语等。请谅解我 
英文:
I'm inserting a Google line chart on my site via the WP plugin wpDataTables (wpDataCharts). I'm using Elementor to build the site. You can see the chart here a little down on the page.
wpDataTables has a limited number of chart options you can adjust, probably based on what the Google API allows. If you want to make further changes, you can use the callback function.
I have used the callback function to remove the padding Google adds to the chart as standard (which makes the chart fill out only 50% of the container) and made the tooltip include both graphs. The working code looks like this:
<script type="text/javascript">
jQuery(window).on('load',function(){
if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
wpDataChartsCallbacks[4] = function(obj){
obj.options.chartArea = {left:135,top:30,width:'100%',height:'75%'};
obj.options.focusTarget = ['category'];
}
});
</script>
However, I want to control the ticks/dates shown on the horizontal axis. I have been looking in the Google API documentation and found the object I think I need (hAxis.ticks), but I just can't make it work. No matter what I do, it has zero impact on the dates shown.
Here's my best bet at the code, but it doesn't work:
<script type="text/javascript">
jQuery(window).on('load',function(){
if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
wpDataChartsCallbacks[4] = function(obj){
obj.options.hAxis.ticks = hAxis: {
ticks: [{v: new Date(2020, 1, 1), f: '2020'}, {v: new Date(2021, 1, 1), f: '2021'}, {v: new Date(2022, 1, 1), f: '2022'}, {v: new Date(2023, 1, 1), f: '2023'}]
}
});
</script>
Any help is much appreciated. Be aware that I have no coding background, so I'm probably making a lot of "easy" mistakes, getting the coding lingo all wrong etc. Bear with me please
答案1
得分: 0
在你提供的代码片段中，看起来在ticks数组内部有一个额外的hAxis:。尝试删除它，看看是否有效：
<script type="text/javascript">
jQuery(window).on('load',function(){
if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
wpDataChartsCallbacks[4] = function(obj){
obj.options.hAxis.ticks = [{v: new Date(2020, 1, 1), f: '2020'}, {v: new Date(2021, 1, 1), f: '2021'}, {v: new Date(2022, 1, 1), f: '2022'}, {v: new Date(2023, 1, 1), f: '2023'}];
}
});
</script>
希望这有所帮助！
英文:
In the code snippet you provided, it appears that you have an extra hAxis: inside the ticks array. Try removing that and see if it works:
<script type="text/javascript">
jQuery(window).on('load',function(){
if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
wpDataChartsCallbacks[4] = function(obj){
obj.options.hAxis.ticks = [{v: new Date(2020, 1, 1), f: '2020'}, {v: new Date(2021, 1, 1), f: '2021'}, {v: new Date(2022, 1, 1), f: '2022'}, {v: new Date(2023, 1, 1), f: '2023'}];
}
});
</script>
Let me know if this helps!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论