Google диаграмма Yaxis Height and Format ⇐ Javascript

[Anonymous]

Я отменяю фактический график вакансий в зависимости от бюджета на отдел на линию, чтобы показать производительность проекта. Я создал демонстрацию JSFiddle с полным рабочим примером. src = "https://i.sstatic.net/olpgisd1.png"/>
Пример, чтобы показать проблему:
https://jsfiddle.net/u0vrodcn> Как я делал так:

Установите высоту диаграммы Google на основе количества строк? & Google, увеличение ширины оси)

Код: Выделить всё

google.charts.load('current', { packages: ['corechart', 'bar'] })
google.charts.setOnLoadCallback(GenerateComplexBarChartReports)

// Helper function to find the minimum value for hAxis, if needed.
// This is a placeholder; you'll need to implement your actual logic here.
function FindMinValue(data) {
let minValue = 0 // Default to 0, or calculate based on your data
// Example: iterate through data to find min value if needed
// for (let i = 0; i < data.getNumberOfRows(); i++) {
//     for (let j = 1; j < data.getNumberOfColumns(); j += 8) { // Adjusted to jump by 8 for each department
//         let actualHours = data.getValue(i, j);
//         let budgetHours = data.getValue(i, j + 4); // Budget hours are 4 columns after actual
//         if (typeof actualHours === "number" && actualHours < minValue) {
//             minValue = actualHours;
//         }
//         if (typeof budgetHours === "number" && budgetHours < minValue) {
//             minValue = budgetHours;
//         }
//     }
// }
return minValue
}

/**
* Calculates the appropriate chart height based on the number of bars
* per y-axis item to prevent overlap and ensure proper spacing.
* @param {google.visualization.DataTable} data The DataTable object for the chart.
* @returns {number} The calculated height for the chartArea.
*/
function CalculateChartHeightBasedOnDataItems(data) {
// Height needed for a single bar including its annotation.
// This is the fundamental unit of vertical space.
const heightOfOneBarAndAnnotation = 30 // Further reduced for tighter packing

// Minimal vertical space for the category label itself, if no bars are present,
// or as a base for very sparse categories.
const minHeightForCategoryLabel = 15 // Further reduced for tighter packing

// Small, consistent padding *between* different y-axis categories.
const interCategorySpacing = 5 // Further reduced for tighter packing

let totalChartAreaHeight = 0

for (let i = 0; i < data.getNumberOfRows(); i++) {
let numberOfActiveSeriesInThisCategory = 0
// Iterate through columns to count actual data series (bars) present for this row.
// Your data structure is: PrimaryKey, SoftwareHours, SoftwareAnnotation, SoftwareToolTip, SoftwareColor,
// SoftwareBudgetHours, SoftwareBudgetAnnotation, SoftwareBudgetToolTip, SoftwareBudgetColor,
// ManufacturingHours, ...  etc.
// Each department block is 8 columns wide (value, annotation, tooltip, style, budget_value, budget_annotation, budget_tooltip, budget_style)
// The first data column is at index 1 (SoftwareHours).
for (let j = 1; j < data.getNumberOfColumns(); j += 8) {
// Check for Actual Hours (column 'j')
let actualHours = data.getValue(i, j)
if (typeof actualHours === 'number' && actualHours > 0) {
numberOfActiveSeriesInThisCategory++
}

// Check for Budget Hours (column 'j + 4' relative to the start of the department's block)
let budgetHoursColIndex = j + 4
// Ensure the budgetHoursColIndex is within the bounds of the data table's columns
if (budgetHoursColIndex < data.getNumberOfColumns()) {
let budgetHours = data.getValue(i, budgetHoursColIndex)
if (typeof budgetHours === 'number' && budgetHours > 0) {
numberOfActiveSeriesInThisCategory++
}
}
}

// Calculate height for the current y-axis category (row)
if (numberOfActiveSeriesInThisCategory === 0) {
// For categories with no bars, allocate minimal space for the label
totalChartAreaHeight += minHeightForCategoryLabel + interCategorySpacing
} else {
// For categories with bars, calculate space based on active bars + inter-category spacing
totalChartAreaHeight +=
numberOfActiveSeriesInThisCategory * heightOfOneBarAndAnnotation +
interCategorySpacing
}
}

// Add some additional padding for the overall chart area,
// useful for top/bottom margins within the plotting region.
totalChartAreaHeight += 50 // General padding for the chart area itself

return totalChartAreaHeight
}

/**
* Generates the complex bar chart reports by iterating through elements
* with the 'complex-barchart' class.
*/
function GenerateComplexBarChartReports() {
let $jsonValueContainers = $('.complex-barchart')
if ($jsonValueContainers.length 

Подробнее здесь: [url]https://stackoverflow.com/questions/79701416/google-chart-yaxis-height-and-format[/url]