Блог

Я использую диаграммы Google с дискретными значениями и, похоже, не могу нарисовать линию vAxis (черным цветом).

Она отображается при отображении графики в непрерывных значениях, но я не хочу, чтобы диаграмма была разнесена таким образом.

вот 2 типа графиков.

http://jsfiddle.net/cFHJY/

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

function drawChart() {
    var discreteData = new google.visualization.DataTable();
    discreteData.addColumn('string', 'Number');
    discreteData.addColumn('number', 'Value');

    discreteData.addRows([
        ['1.492', 10],
        ['30.701', 17],
        ['127.469', 6],
        ['749.382', 11]
    ]);

    var discreteChart = new google.visualization.ColumnChart(document.getElementById('discrete_chart_div'));
    discreteChart.draw(discreteData, {
        title: 'Discrete Axis Line Chart'
    });

    var continuousData = new google.visualization.DataTable();
    continuousData.addColumn('number', 'Number');
    continuousData.addColumn('number', 'Value');

    continuousData.addRows([
        [1.492, 10],
        [30.701, 17],
        [127.469, 6],
        [749.382, 11]
    ]);

    var continuousChart = new google.visualization.ColumnChart(document.getElementById('continuous_chart_div'));
    continuousChart.draw(continuousData, {
        title: 'Continuous Axis Line Chart'
    });
}
  

Как мне нарисовать линию vAxis?

«Линия оси» на самом деле является базовой линией hAxis, которая доступна только для непрерывных осей. С небольшим количеством хакерства вы можете поместить свои данные на непрерывную ось, сохраняя при этом ее дискретный характер. Используйте DataView для преобразования ваших данных в тип «число» (используя индекс строки для значения и строковое значение в качестве форматированного значения) и создайте hAxis.ticks параметр из пар значение / форматированное значение в представлении:

 function drawChart() {
    var discreteData = new google.visualization.DataTable();
    discreteData.addColumn('string', 'Number');
    discreteData.addColumn('number', 'Value');

    discreteData.addRows([
        ['1.492', 10],
        ['30.701', 17],
        ['127.469', 6],
        ['749.382', 11]
    ]);

    var view = new google.visualization.DataView(discreteData);
    view.setColumns([{
        type: 'number',
        label: discreteData.getColumnLabel(0),
        calc: function (dt, row) {
            return {v: row   1, f: dt.getFormattedValue(row, 0)};
        }
    }, 1]);

    var ticks = [];
    for (var i = 0; i < view.getNumberOfRows(); i  ) {
        ticks.push({v: view.getValue(i, 0), f: view.getFormattedValue(i, 0)});
    }

    var range = view.getColumnRange(0);
    var offset = 0.5; // change this to move the left/right margins of the chart

    var discreteChart = new google.visualization.ColumnChart(document.getElementById('discrete_chart_div'));
    discreteChart.draw(view, {
        title: 'Discrete Axis Line Chart',
        hAxis: {
            ticks: ticks,
            viewWindow: {
                min: range.min - offset,
                max: range.max   offset
            },
            // set gridlines.color to "transparent" to hide the vertical gridlines
            /*
            gridlines: {
                color: 'transparent'
            }
            */
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
  

Пример:http://jsfiddle.net/asgallant/h4Kfd /