Question

是否可以在图片中创建如图所示的谷歌图表？我最大的问题是让左侧的字体大小更小。第二个问题是得到时间，如下午12点至下午14点，下午14点是否可以选择图片中页脚的时间范围？

Google Chart

google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'dummy', 'Sales'],
        [12, 0, 440],
        [13, null, 450],
        [14, null, 412],
        [15, null, 434]
    ]);

    var options = {
        series: {
            0: {
                targetAxisIndex: 0,
                visibleInLegend: false,
                pointSize: 0,
                lineWidth: 0
            },
            1: {
                targetAxisIndex: 1,
                visibleInLegend: false,
            }
        },
        colors: ['red'],
        backgroundColor: '#324149',
        chartArea: {
            backgroundColor: {
                stroke: '#fff',
                strokeWidth: 0
            }
        },
        hAxis: {
            gridlines: {
                color: '#37454c',
                count: 7
            },
            textStyle: {
                color: '#fff'
            }
        },
        vAxis: {
            gridlines: {
                color: '#37454c',
                count: 7
            },
            textStyle: {
                color: '#525b60',
                fontSize: '3'
            },
            minValue: 390
        },
        vAxes: {
            0: {
                textPosition: 'none'
            },
            1: {
                textPosition: 'in'
            }
        }
    }
    var chart = new google.visualization.AreaChart(document.getElementById('chart'));
    chart.draw(data, options);
}

Answer 1

您的fontSize问题不是由于您的代码，您在“小提琴选项”面板中选中了“规范化CSS”选项，这会使图表中的字体大小变得混乱。取消选中该字体，您的字体将是指定的大小。顺便说一句，fontSize子选项需要一个数字，而不是一个字符串，因此它应该是fontSize: 3。

您可以向HTML添加复制时间范围功能的按钮，但ChartRangeFilter控件执行类似的功能，而无需任何自定义编码。

如果希望将轴值格式化为时间，则需要使用“日期”，“日期时间”或“timeofday”类型的域（x）轴。然后，您可以在图表的hAxis.format选项中指定格式。

Google Charts fontsize不起作用

1 个答案: