Auf Thema antworten

Beitrag

[QUOTE="Rostam, post: 14999, member: 5572"]
Hallo allerseits,
ich habe ein Canvas-Diagramm (Balkendiagramm) erstellt und versuche nun die Anzahl der Ticks anzupassen, aber es will mir einfach nicht gelingen. Habe auch schon verschiedene KI's gefragt, aber die verschlimmbessern es nur und wir kommen nicht auf einen Nenner. Daher hoffe ich, dass ihr mir hier mit der kleinen Anpassung helfen könntet.

Also, kurz zur Erklärung: Ich habe zwei Diagramme, die ich mittels Dropdown switche. Das klappt! Beide haben einen Scale von 0-1. Soweit so gut! Bei einem Diagramm "Region" geht es in 0,1er Schritten, das heißt zwischen 0 und 1 gibt es 8 Ticks und es sieht auch gut aus.
Problem ist jetzt beim zweiten Diagramm. Dort sind die Balken alle größer als 9, daher sind alle sehr lang und das Diagramm sieht einfach nicht gut aus. Daher wollte ich den StepSize verringern auf 0,5er Schritte. Dadurch sind es jetzt aber doppelt so viele Ticks wie vorher und die Balken sind natürlich genau so lang wie vorher. Beides nicht gut! Also, um die Anzahl der Ticks vom anderen Diagramm beizubehalten, würde ich hier gerne auch nur 8 Ticks zwischen 0 und 1 haben, aber der erste nach 0 sollte schon die 6 sein (an Stelle von 1) und dann weiter mit 6.5, 7, 7.5, 8, 8.5, 9, 9.5 und dann das Ende 1. [B]Das klappt leider nicht so recht![/B] Das Ziel ist es damit die einzelnen Balken von der Länge her besser verteilt zu haben, damit das Diagramm besser aussieht und man trotzdem unten in der X-Leiste korrekt erkennen kann wo die stehen.

Hoffe ich konnte das jetzt einigermaßen verständlich erklären. Das hier ist mein Code so far:
[CODE=html]<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown with Responsive Bar Chart</title>
    <style>
        body {
            font-family: Montserrat, sans-serif;
            text-align: center;
            margin-top: 0px;
        }
        #chartContainer {
            width: 100%; /* Full width */
            max-width: 600px; /* Maximum width for large screens */
            height: 300px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    
    <select id="dataSelector" onchange="updateChart()">
        <option value="region">By Region</option>
        <option value="country">By Country</option>       
    </select>

<div id="chartContainer">
        <canvas id="barChart"></canvas>
    </div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
    <script>
        // Initial data for "By Country"
        const countryData = {
            labels: ['Denmark', 'Estonia', 'Singapore', 'Republic of Korea', 'Iceland', 'Saudi Arabia', 'United Kingdom', 'Australia', 'Finland', 'Netherlands', 'United Arab Emirates', 'Germany', 'Japan', 'Sweden', 'Norway', 'New Zealand', 'Spain', 'Bahrain'],
            datasets: [{
                label: 'Country Index',
                data: [0.98, 0.97, 0.96, 0.96, 0.96, 0.96, 0.95, 0.95, 0.95, 0.95, 0.95, 0.93, 0.93, 0.93, 0.93, 0.92, 0.92, 0.91],
                backgroundColor: 'rgba(217, 189, 106, 1)',
                borderColor: 'rgba(217, 189, 106, 1)',
                borderWidth: 1,
                barThickness: 12,
            }]
        };

// Initial data for "By Region"
        const regionData = {
            labels: ['Europe', 'Asia', 'Americas', 'World Average', 'Oceania', 'Africa'],
            datasets: [{
                label: 'Regional Index',
                data: [0.84, 0.69, 0.67, 0.63, 0.52, 0.42],
                backgroundColor: 'rgba(217, 189, 106, 1)',
                borderColor: 'rgba(217, 189, 106, 1)',
                borderWidth: 1
            }]
        };

// Create the initial chart
        const ctx = document.getElementById('barChart').getContext('2d');
        let barChart = new Chart(ctx, {
            type: 'bar',
            data: regionData,
            options: {
                responsive: true, // Make the chart responsive
                maintainAspectRatio: false, // Allow for different aspect ratios
                indexAxis: 'y', // Horizontal bar chart
                scales: {
                    x: {
                        beginAtZero: true,
                        min: 0,
                        max: 1,
                    },
                    y: {
                        display: false // Hide the axis labels on the left
                    }
                },
                plugins: {
                    legend: {
                        display: false // Hide the legend
                    },
                    datalabels: {
                        align: 'end', // Align labels to the start of the bar (left)
                        anchor: 'start',  // Position the labels inside the bars
                        color: '#fff',  // Set label color to white (for visibility inside the bar)
                        formatter: function(value, context) {
                            return context.chart.data.labels[context.dataIndex]; // Display the country/region name as label
                        },
                        font: {
                            size: 11 // Adjust font size if needed
                        },
                        clip: true // Ensure labels are inside the chart area
                    }
                }
            },
            plugins: [ChartDataLabels] // Register the Data Labels plugin
        });

// Function to update the chart when dropdown is changed
        function updateChart() {
            const selectedValue = document.getElementById('dataSelector').value;

if (selectedValue === 'country') {
                barChart.data = countryData;
                barChart.options.scales.x.ticks.stepSize = 0.05; // Set a smaller step size for Country
                barChart.data = countryData;
            } else if (selectedValue === 'region') {
                barChart.data = regionData;
                barChart.options.scales.x.ticks.stepSize = 0.1; // Set a larger step size for Region
                barChart.data = regionData;
            }
            // Set the min and max for both charts
            barChart.options.scales.x.min = 0;
            barChart.options.scales.x.max = 1;
            
            barChart.update();
        }
    </script>
</body>
</html>
[/CODE]

Freue mich über jeden Input, Tipp oder auch Verbesserungsvorschläge zur Simplifizierung, falls möglich.

Besten Dank! 🙏🙏
[/QUOTE]

Authentifizierung