Question

我在Google图表中的vaxis.ticks选项有问题。

我的代码可以工作并且图表正确，但是ticks数组中的字符串被忽略，并且显示初始数字。没有错误或警告。

我似乎找不到解决此问题的方法。

 oModel.createEntry("/EmployeeSet", {
     groupId: "employees",
     properties: {
         name: "New Guy"
     }
 });

 oModel.submitChanges({groupId: "employees"});

示例AJAX响应：

employees

Result

Answer 1

您使用的是材料图表，而不是经典图表

材料图表不支持几个选项，
参见-> Tracking Issue for Material Chart Feature Parity

这包括-> {hAxis,vAxis,hAxes.*,vAxes.*}.ticks

材料 = packages: ['line']-google.charts.Line

经典 = packages: ['corechart']-google.visualization.LineChart

如果您切换到经典，则可以选择使图表与材料

相似

theme: 'material'

使用经典会出现ticks，但是还需要有足够的空间来显示ticks

使用示例数据，y轴的比例是如此之大，将没有足够的空间显示全部

请参阅以下工作片段...

google.charts.load('current', {
    packages: ['corechart']
}).then(getData);

function getData() {
    $.ajax({
        url: '/api/chart/eta/lane/45',
        dataType: 'json'
    }).done(drawChart).fail(function () {
        drawChart([
            ["2018-07-25 17:09:24",311,4490,null,-10994],
            ["2018-07-25 17:16:20",364,4543,null,-11047],
            ["2018-07-25 17:19:29",412,4591,null,-11095],
            ["2018-07-25 17:21:25",528,4707,null,-11211],
            ["2018-07-25 17:21:43",546,4725,null,-11229],
            ["2018-07-25 17:22:01",564,4743,null,-11247],
            ["2018-07-25 17:22:18",581,4760,null,-11264],
            ["2018-07-25 17:22:38",601,4780,null,-11284],
            ["2018-07-25 17:22:57",620,4799,null,-11303],
            ["2018-07-25 17:23:17",640,4819,null,-11323],
            ["2018-07-25 17:23:36",659,null,5573,-11342],
            ["2018-07-25 17:23:56",616,null,5530,-11299],
            ["2018-07-25 17:28:02",862,null,5776,-11545]
        ]);
    });
}

function drawChart(response) {
    var array = [];
    var ticks = [];
    array.push(['Time', 'line 1', 'line 2', 'line 3', 'line 4']);
    $.each(response, function (key, row) {
        array.push([new Date(row[0]), row[1], row[2], row[3], row[4]]);
        if(row[1])
            ticks.push({v: row[1], f: secondsToTime(row[1])});
        if(row[2])
            ticks.push({v: row[2], f: secondsToTime(row[2])});
        if(row[3])
            ticks.push({v: row[3], f: secondsToTime(row[3])});
        if(row[4])
            ticks.push({v: row[4], f: secondsToTime(row[4])});
    });

    var datatable = google.visualization.arrayToDataTable(array);

    var options = {
        theme: 'material',
        width: 1000,
        height: 800,
        legend: {position: 'none'},
        hAxis: {
            format: 'd.M.yyyy H:mm'
        },
        vAxis: {
            title: "? ETA",
            ticks: ticks
        }
    };

    var container = document.getElementById('chart');
    var chart = new google.visualization.LineChart(container);

    chart.draw(datatable, options);
}

function secondsToTime(seconds) {
    var isNegative = false;
    if(seconds < 0) {
        seconds = Math.abs(seconds);
        isNegative = true;
    }
    return (isNegative ? '-' : '') + Math.floor(seconds / 3600) + ':' + Math.floor((seconds%3600) / 60);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

注释：建议先获取Google图表，然后再获取数据
google图表只需要在每个页面加载一次就可以加载一次，而不是每个要绘制的图表
默认情况下，google.charts.load将等待页面加载，因此可以代替$(document).ready或其他类似功能使用它
与上述类似的设置将允许您绘制多个图表或进行多个ajax调用，
而仅一次加载Google图表...

Google Chart刻度完全不显示

1 个答案: