gpt4 book ai didi

javascript - 多个 X 轴标签谷歌图表

转载 作者:行者123 更新时间:2023-11-29 21:32:45 24 4
gpt4 key购买 nike

如何使用 google charts API 创建多个 x 轴标签?

我现在正在尝试创建一个条形图,其中主要 x 轴标签为“产品”,而各个条形图与相关产品相关。但是,我想按月分隔一组“n”个产品(来自数据库的数据)。

基本上我想要一个主 X 轴标签“产品”和每组产品之间的分界线以及这组与产品相关的条形图下方的标签,按月将每个“产品集”分组在一起

提前感谢任何可以帮助我的人!!

最佳答案

使用谷歌图表的双 x 轴条形图示例。取自他们的 api 文档,可以在这里找到:

Double x-axis bar chart

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);

function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);

var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
bars: 'horizontal', // Required for Material Bar Charts.
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
}
};

var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="dual_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

不确定这是否正是您想要做的,但如果不是,请告诉我们,我们可以稍微修改一下。

关于javascript - 多个 X 轴标签谷歌图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35732356/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com