Круговой прогресс и график ⇐ CSS

[Anonymous]

Я пытался создать этот дизайн, используя HTML, CSS и JS (особенно chart.io). Мне интересно, есть ли лучший способ сделать это, не полагаясь на JS. Причина этого в том, что этот конкретный скриншот ниже предназначен для отчета. Поэтому мне нужно убедиться, что дизайн любезно воспринимает все браузеры. И если пользователь решает сохранить его в качестве PDF, отчет не должен иметь никаких проблем с рендерингом на разных зрителях PDF. Я беспокоюсь о том, чтобы иметь слишком много JS, так как у меня были проблемы, когда у меня были проблемы, когда дизайны ломаются в iOS и Acrobat. Он имеет слабый зеленый градиент и не заполняет весь прогресс. Окончания стержня также определяется тем, как далеко он находится от 12'oclock.




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>
Я очень признателен, если бы вы могли дать некоторые рекомендации или если бы вы могли помочь мне с этим. Заранее спасибо.

Подробнее здесь: https://stackoverflow.com/questions/795 ... -and-graph