1) горизонтальная базовая линия
горизонтальная базовая линия не отображается, поскольку в первом столбце есть строковое значение
, при этом создается дискретная ось *Вместо 1008 *
// string used here --> ["", 1.5, "opacity: .75;", 13.1, "opacity: 0;", "GOAL 13.1 points"]
используем непрерывную ось X (число, дата и т. Д.)
// number --> [1, 1.5, "opacity: .75;", 13.1, "opacity: 0;", "GOAL 13.1 points"]
, чтобы скрыть метку оси, как это делается с помощью строки. может предоставить пользовательскую ось ticks
мы можем использовать нотацию объекта для предоставления как значения (v:), так и отформатированного значения (f:)
, что позволяет нам предоставлять пустую строку для отформатированного значения
просто убедитесь, что значение галочки соответствует значению, указанному в первом столбце выше.
vAxis: {
gridlines: {
color: 'transparent'
},
ticks: [{v: 1, f: ''}]
}
примечание: непрерывная ось также приведет к появлению других линий сетки,
мы можем удалить их, сделав их прозрачными ...
2)Дробные значения
мы можем предоставить строку формата для меток оси ...
hAxis: {
format: '0' // <-- format as integer
},
3) размещение текста аннотации
единственная доступная опция здесь stem.length
мы можем предоставить отрицательное значение для перемещения аннотации влево ...
stem: {
color: 'transparent',
length: -128
},
однако, фактическая позиция не будет оставаться постоянной, так какразмер диаграммы изменяется
, когда диаграмма меньше, текст будет дальше от линии (больше ближе).
Вместо этого мы можем вручную переместить текст аннотации в событие 'ready' на диаграмме.
, но мы все равно должны использовать отрицательную длину ствола, чтобы аннотация появлялась слева и не позволялапорез. в противном случае мы в конечном итоге переместим аннотацию обрезки.
и, поскольку мы переместим аннотацию ниже оси,
нам нужно увеличить chartArea.bottom, иначе она также будет обрезана там.
наконец, диаграмма сбросит положение аннотации в любой интерактивности,
, например при наведении курсора. мы должны использовать MutationObserver, чтобы сохранить аннотацию в новой позиции.
см. Следующий рабочий фрагмент ...
google.charts.load('current', {
packages: ['corechart']
}).then(drawHorizontalChart_portal_name_stella_york_horz_month_points);
function drawHorizontalChart_portal_name_stella_york_horz_month_points() {
var data = google.visualization.arrayToDataTable([
["", "Goal Achieved", {role: 'style'}, "GOAL 13.1 points", {role: 'style'}, {role: 'annotation'}],
[1, 1.5, "opacity: .75;", 13.1, "opacity: 0;", "GOAL 13.1 points"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
}, 3, 4, 5]);
var options = {
title: '',
width: '100%',
height: 132,
chartArea: {
height: '100%',
width: '100%',
top: 36,
left: 18,
right: 18,
bottom: 48
},
hAxis: {
title: '',
minValue: 0,
gridlines: {
count: 6
},
format: '0'
},
bar: {
groupWidth: "60%"
},
legend: {
position: "top"
},
series: {
0: {
color: '#70b5c5',
visibleInLegend: false
}, // Goal Achieved
1: {
color: '#000000',
type: 'line',
annotations: {
textStyle: {
color: '#000000'
},
stem: {
color: 'transparent',
length: -128
},
vertical: true
}
} // Target Goal
},
vAxis: {
gridlines: {
color: 'transparent'
},
ticks: [{v: 1, f: ''}]
}
};
var chart = new google.visualization.BarChart(document.getElementById("portal-name-stella-york-horz-month-points"));
google.visualization.events.addListener(chart, 'ready', function () {
// get x location of goal
var layout = chart.getChartLayoutInterface();
var xLoc = drawVAxisLine(chart, layout, data.getValue(0, 3));
// prevent annotation reset
var observer = new MutationObserver(function () {
var annotationText = data.getValue(0, data.getNumberOfColumns() -1);
Array.prototype.forEach.call(chart.getContainer().getElementsByTagName('text'), function(annotation) {
// find annotation
if ((annotation.textContent === annotationText) &&
(annotation.getAttribute('fill') === options.series[1].annotations.textStyle.color)) {
// move annotation
annotationBounds = annotation.getBBox();
annotation.setAttribute('x',
xLoc - (annotationBounds.width / 2)
);
annotation.setAttribute('y',
layout.getYLocation(0) + (parseInt(annotation.getAttribute('font-size')) * 3)
);
}
});
});
observer.observe(chart.getContainer(), {
childList: true,
subtree: true
});
});
chart.draw(view, options);
}
jQuery(window).resize(function() {
drawHorizontalChart_portal_name_stella_york_horz_month_points();
});
function drawVAxisLine(chart, layout, value) {
var chartArea = layout.getChartAreaBoundingBox();
var svg = chart.getContainer().getElementsByTagName('svg')[0];
var xLoc = layout.getXLocation(value)
svg.appendChild(createLine(xLoc, chartArea.top + chartArea.height, xLoc, chartArea.top, '#000000', 2)); // axis line
return xLoc;
}
function createLine(x1, y1, x2, y2, color, w) {
var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', x1);
line.setAttribute('y1', y1);
line.setAttribute('x2', x2);
line.setAttribute('y2', y2);
line.setAttribute('stroke', color);
line.setAttribute('stroke-width', w);
return line;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="portal-name-stella-york-horz-month-points"></div>
примечание: вам следует дождаться события 'ready', прежде чем вносить какие-либо изменения или добавлять элементы в диаграмму.