Kreislauf und Diagramm ⇐ CSS

[Anonymous]

Ich habe versucht, dieses Design mit HTML, CSS und JS (insbesondere mit Chart.io) zu erstellen. Ich frage mich, ob es einen besseren Weg gibt, dies zu tun, ohne sich viel auf JS zu verlassen. Der Grund dafür ist, dass dieser spezielle Screenshot unten für einen Bericht liegt. Daher muss ich sicherstellen, dass das Design mit allen Browsern gnädig macht. Und wenn ein Benutzer beschließt, es als PDF zu speichern, sollte der Bericht keine Probleme mit verschiedenen PDF -Zuschauern haben. Ich mache mir Sorgen, dass ich zu viel JS habe, da ich Probleme hatte, wo die Entwürfe in iOS und Acrobat brechen. Oclock, es hat einen schwachen grünen Gradienten und füllt den gesamten Fortschritt nicht aus. Die Endungen des Balkens werden auch dadurch bestimmt, wie weit es von 12'oclock ist.




Age Progress and Graph



body {
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
margin: 0;
padding: 2rem;
width: 700px;
}

.progress-container {
position: relative;
width: 160px;
height: 160px;
margin-bottom: 2rem;
}

.progress-container svg {
transform: rotate(-90deg);
}

.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

.progress-text h2 {
margin: 0;
font-size: 2rem;
}

.chart-container {
width: 440px;
height: 150px;
}















44.37
Older ⤴






Chart.register(ChartDataLabels);

const currentAge = 42;
const biologicalAge = 44.37;
const fullCircle = 440;
const percent = Math.min(biologicalAge / currentAge, 1);
const offset = fullCircle * (1 - percent);

document.querySelector("circle[stroke-dashoffset='{{DASH_OFFSET}}']")
.setAttribute("stroke-dashoffset", offset);

const ctx = document.getElementById('ageChart').getContext('2d');
const dataPoints = [40.44, 45.54, 44.37];

const ageChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan 2024', 'Apr 2024', 'Jul 2024'],
datasets: [{
label: 'Biological Age',
data: dataPoints,
fill: false,
tension: 0.4,
borderColor: function(context) {
const chart = context.chart;
const {ctx, chartArea} = chart;
if (!chartArea) return;
const gradient = ctx.createLinearGradient(chartArea.left, 0, chartArea.right, 0);
gradient.addColorStop(0, '#36d1dc');
gradient.addColorStop(1, '#a646d7');
return gradient;
},
borderWidth: 3,
pointRadius: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
left: 20,
right: 20
}
},
scales: {
y: {
suggestedMin: 35,
suggestedMax: 50,
ticks: {
stepSize: 5
},
grid: {
drawTicks: true,
drawOnChartArea: true
}
},
x: {
grid: {
drawTicks: false,
drawOnChartArea: false,
drawBorder: false,
color: 'transparent',
lineWidth: 0
},
border: {
display: false
},
ticks: {
padding: 8
},
offset: true
}
},
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: ctx => `Age: ${ctx.raw}`
}
},
datalabels: {
align: 'center',
anchor: 'center',
formatter: (value) => value.toFixed(2),
backgroundColor: (context) => context.dataIndex === context.dataset.data.length - 1 ? '#000' : '#fff',
borderRadius: 999,
color: (context) => context.dataIndex === context.dataset.data.length - 1 ? '#fff' : '#000',
font: {
weight: 'bold'
},
padding: 6,
borderWidth: 1,
borderColor: '#000'
}
}
},
plugins: [ChartDataLabels]
});




< /code>
Ich würde es sehr schätzen, wenn Sie einige Empfehlungen geben könnten oder ob Sie mir dabei helfen könnten. Vielen Dank im Voraus.