Google图表 - 如何在轴上添加固定比例-Java 学习之路

我无法正确缩放图表 . 我的图表以24小时格式表示一天中每小时的数据，这意味着我需要在线图上的数字0-24 .

我已经尝试将 logScale ， minValue 和 maxValue 属性添加到 hAxis ，但没有任何工作 .

正如您在图表上看到的那样， hour 轴不是从 0-24 小时跨越固定轴，而是从 9-15 小时开始 .

the chart

我的数据集中只有3行，它们位于 9 ， 14 和 15 小时 . 尽管如此，这些线条仍然是 9-14 ，好像它们有 Value ;但是那里没有数据，因此这些线应该在这两点之间沿着底部运行 0 .

如何在我的图表上放置一个固定的水平刻度，并且每小时在我的线上都有单独的值？

这是我的代码：

google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);

function drawChart()
{
    var json = $.getJSON('my JSON data link', function(data)
    {
        var chartStructure = new google.visualization.DataTable();
        var chartData = [];

        chartStructure.addColumn('number', 'Hour');
        chartStructure.addColumn('number', 'Pageviews');
        chartStructure.addColumn('number', 'Unique Pageviews');
        chartStructure.addColumn('number', 'Sales');
        chartStructure.addColumn('number', 'Earnings in $AUD');

        for (i = 0; i < data.length; i++)
        {
            chartData[i] = [];
            chartData[i][0] = parseInt(data[i].hour);
            chartData[i][1] = parseFloat(data[i].profit);
            chartData[i][2] = parseFloat(data[i].profit);
            chartData[i][3] = parseFloat(data[i].sales);
            chartData[i][4] = parseFloat(data[i].profit);
            // These chartData values are not correct because I am testing

            chartStructure.addRows(chartData);
        }

        var options = {
            hAxis: {
                'minValue': 0, 
                'maxValue': 24
            }
        };

        var chart = new google.charts.Line(document.getElementById('todays-total-sales'));

        chart.draw(chartStructure, options);
    });
}

$(window).resize(function()
{
    drawChart();
});

2 回答

1
使用 viewWindow .
```
hAxis: {
      title: 'Time',
      viewWindow:{
          max:1000,
          min:-100
      }
    },
```
JSFiddle

UPDATE

如果您使用的是MaterialCharts，请注意选项有different syntax！

为了使您能够使用经典选项，您需要更改
```
chart.draw(data, options);
```
至
```
chart.draw(data, google.charts.Line.convertOptions(options));
```
HERE是你更新的小提琴 .
回复于 2024-05-18T01:13:08+08:00

var options = {
                title: "Posted Memes",
                width: 450,
                height: 300,
                is3D:true,
                bar: { groupWidth: "95%" },
                legend: { position: "none" },
                vAxis: {
                    title: 'No of Memes',
                    viewWindowMode: 'explicit',
                    viewWindow: {
                        max: 180,
                        min: 0,
                        interval: 1,
                    },

                }

            };

回复于 2024-05-18T01:13:08+08:00

Google图表 - 如何在轴上添加固定比例

2 回答

相关问题