问题：
hAxis中的Google折线图月份标签不正确
岑彬炳
我有一个带有3条线的动画折线图。
小提琴：
https://jsfiddle.net/8b3czfuq/
我在折线图上显示每日明智的数据，并以h轴显示月-年标签。
google.charts.load('current', {
packages: ['corechart']
});
google.setOnLoadCallback(prepareChartData);
function prepareChartData(){
var chartData = new google.visualization.DataTable();
chartData.addColumn('date', 'Date');
chartData.addColumn('number', 'Total');
chartData.addColumn('number', 'Dogs');
chartData.addColumn('number', 'Cats');
title = 'My Chart';
var options = {
title: title,
curveType: 'function',
legend: {position: 'bottom', alignment: 'start'},
colors: ['#003f5c', '#ffa600', '#665191', '#f95d6a'],
annotations: {
alwaysOutside: true,
textStyle: {
color: 'black',
fontSize: 11
},
},
hAxis: {
format: 'MMM yy',
viewWindowMode: "explicit",
},
vAxis: {
minValue: 0,
viewWindowMode: "explicit",
viewWindow: { min: 0 },
title: ''
},
titleTextStyle: {
color:'#3a3a3a',
fontSize:24,
bold:false
// fontName: "Segoe UI"
},
bar: {groupWidth: '95%'},
bars: 'horizontal'
};
var chartDivId = "chart_div";
var chart = new google.visualization.LineChart(document.getElementById(chartDivId));
var rawData =[];
var chart_object = { "Feb 20": {monthLabel: "Feb", chartArray:[{'date': "2020-2-12", 'total': "5", 'cats': "10", 'dogs': "10"},{'date': "2020-2-13", 'total': "15", 'cats': "20", 'dogs': "20"}]}, "Mar 20": {monthLabel: "Mar", chartArray:[{'date': "2020-3-10", 'total': "5", 'cats': "10", 'dogs': "10"},{'date': "2020-03-11", 'total': "15", 'cats': "30", 'dogs': "30"}]}};
$.each(chart_object, function(i, chartobject) {
$.each( chartobject.chartArray, function( chartIndex , chartValue ){
date = chartValue['date'];
total = parseInt(chartValue['total']);
catscount = parseInt(chartValue['cats']);
dogscount = parseInt(chartValue['dogs']);
catspercentage = 0;
catspercentageAnnotation = catscount+", percent "+catspercentage+"%";
dogsspercentage = 0;
dogsspercentageAnnotation = dogscount+", percent "+dogsspercentage+"%";
rawData.push([ new Date(date), total, {v: catscount, f: catspercentageAnnotation}, {v: dogscount, f: dogsspercentageAnnotation}]);
});
});
var counter = 0;
drawChart();
function drawChart() {
if(counter < rawData.length){
chartData.addRow(rawData[counter]);
// build x-axis ticks to prevent repeated labels
var dateRange = chartData.getColumnRange(0);
var ticks = [];
var dateTick = dateRange.min;
while (dateTick.getTime() <= dateRange.max.getTime()) {
ticks.push(dateTick);
dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 2, 0);
}
options.hAxis.ticks = ticks;
chart.draw(chartData, options);
counter++;
window.setTimeout(drawChart, 1000);
}
}
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
我对这张图表有一些问题。
>
我有二月和三月的数据。但hAxis标签中只显示了Feb标签。预期结果是，它应该显示与对象中日期对应的所有月份标签。
haxis月份标签从左端开始，最后一个月在最右端。我想在折线图中显示该月数据开始的标签。即假设我有4月份的数据，在haxis中，即使折线图中的4月份数据在标签位置之前开始，4月份的标签也显示在右端。
对于 haxis 中的第一个标签，我还想显示日期。在这种情况下，2020-2-12是最小数据。因此，在 haxis 中，它应该显示 2 月 12 20 日，所有其他标签应仅为 MMM yy。
有人能帮我做以上3个修复吗？
提前感谢。
共有1个答案
雍河
要在月初显示日期标签，
需要使用月的第一天。。。
dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 1, 1); // first day
当前代码使用月的最后一天（基于其他问题的数据）
dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 2, 0); // last day
接下来，为了以不同的格式显示第一个日期，
我们可以对价格变动使用对象符号 （{}），
其中 v： 是价格变动的值，f： 是格式化的值
在这里，我们使用日期格式化程序来更改第一个价格变动的格式
// build x-axis ticks to prevent repeated labels
var dateFormat = new google.visualization.DateFormat({
pattern: 'yyyy-MM-dd'
});
var dateRange = chartData.getColumnRange(0);
var ticks = [];
var dateTick = dateRange.min;
while (dateTick.getTime() <= dateRange.max.getTime()) {
if (ticks.length === 0) {
// format first tick
ticks.push({
v: dateTick,
f: dateFormat.formatValue(dateTick)
});
} else {
ticks.push(dateTick);
}
dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 1, 1);
}
请参见以下工作片段...
google.charts.load('current', {
packages: ['corechart']
});
google.setOnLoadCallback(prepareChartData);
function prepareChartData(){
var chartData = new google.visualization.DataTable();
chartData.addColumn('date', 'Date');
chartData.addColumn('number', 'Total');
chartData.addColumn('number', 'Dogs');
chartData.addColumn('number', 'Cats');
title = 'My Chart';
var options = {
title: title,
curveType: 'function',
legend: {position: 'bottom', alignment: 'start'},
colors: ['#003f5c', '#ffa600', '#665191', '#f95d6a'],
annotations: {
alwaysOutside: true,
textStyle: {
color: 'black',
fontSize: 11
},
},
hAxis: {
format: 'MMM yy',
viewWindowMode: "explicit",
},
vAxis: {
minValue: 0,
viewWindowMode: "explicit",
viewWindow: { min: 0 },
title: ''
},
titleTextStyle: {
color:'#3a3a3a',
fontSize:24,
bold:false
// fontName: "Segoe UI"
},
bar: {groupWidth: '95%'},
bars: 'horizontal'
};
var chartDivId = "chart_div";
var chart = new google.visualization.LineChart(document.getElementById(chartDivId));
var rawData =[];
var chart_object = { "Feb 20": {monthLabel: "Feb", chartArray:[{'date': "2020-2-12", 'total': "5", 'cats': "10", 'dogs': "10"},{'date': "2020-2-13", 'total': "15", 'cats': "20", 'dogs': "20"}]}, "Mar 20": {monthLabel: "Mar", chartArray:[{'date': "2020-3-10", 'total': "5", 'cats': "10", 'dogs': "10"},{'date': "2020-03-11", 'total': "15", 'cats': "30", 'dogs': "30"}]}};
$.each(chart_object, function(i, chartobject) {
$.each( chartobject.chartArray, function( chartIndex , chartValue ){
date = chartValue['date'];
total = parseInt(chartValue['total']);
catscount = parseInt(chartValue['cats']);
dogscount = parseInt(chartValue['dogs']);
catspercentage = 0;
catspercentageAnnotation = catscount+", percent "+catspercentage+"%";
dogsspercentage = 0;
dogsspercentageAnnotation = dogscount+", percent "+dogsspercentage+"%";
rawData.push([ new Date(date), total, {v: catscount, f: catspercentageAnnotation}, {v: dogscount, f: dogsspercentageAnnotation}]);
});
});
var counter = 0;
drawChart();
function drawChart() {
if(counter < rawData.length){
chartData.addRow(rawData[counter]);
// build x-axis ticks to prevent repeated labels
var dateFormat = new google.visualization.DateFormat({
pattern: 'yyyy-MM-dd'
});
var dateRange = chartData.getColumnRange(0);
var ticks = [];
var dateTick = dateRange.min;
while (dateTick.getTime() <= dateRange.max.getTime()) {
if (ticks.length === 0) {
// format first tick
ticks.push({
v: dateTick,
f: dateFormat.formatValue(dateTick)
});
} else {
ticks.push(dateTick);
}
dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 1, 1);
}
options.hAxis.ticks = ticks;
chart.draw(chartData, options);
counter++;
window.setTimeout(drawChart, 1000);
}
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
类似资料：
-
我需要用1整年的数据制作一个图表，但是它有太多的x标签。 我这样做是为了删除一些： 这在一段时间内运行良好，但现在我需要＜code＞工具提示 我正在使用和。
-
我使用的是chart.bundle.min.js 2.3.0。
-
折线图用于绘制基于折线的图表。在本节中，我们将讨论以下类型的基于折线的图表。 图表类型 描述 基本折线图 基本折线图 带点折线图 带点折线图 定制背景色折线图 带有自定义背景颜色的图表。 定制线条颜色折线图 带有自定义线条颜色的图表。 定制轴和刻度标签折线图 带有自定义轴和刻度标签的图表。 带十字准线折线图 折线图在选择的数据点处显示十字准线。 定制线条样式折线图 带有自定义线条颜色的图表。 带曲
-
我正在尝试增加我的折线图的线条粗细，使用React-Google-Charts实现。我已经看过了文档，但任何与线条粗细有关的东西都不起作用。我如何增加线条的粗细，并为线条提供不同的颜色。下面是我的实现和增加线条粗细的方法 对行没有执行任何操作。
-
问题内容： 我正在使用Google Visualization为我的应用程序创建折线图。我有以下要求： 处理图例事件（例如doubleClick，我已通过某种方式解决了该事件） 将图例两行包装以避免分页（大多数imp和必填项） 问题答案： 示例：构建自定义图例，该图例与数据和图表同步…
-
如何在下面的屏幕截图中获得由红色附件突出显示的部分的宽度？ 我试过了 是刻度的列表，但没有任何返回刻度宽度的方法，例如或任何此类方法。