#javascript #jquery #chart.js
Вопрос:
Я ищу решение для загрузки моего линейного графика, как только я нажимаю на разные вкладки. В этом случае я должен признать, что я использую Webflow в качестве своей платформы и на основе этого встраиваю свой код, поэтому, даже если вы не видите никаких вкладок в моем коде, я могу легко связать его с моими вкладками Webflow. Надеюсь, вы поможете мне вписать его в мой почти готовый продукт. В приложении вы найдете изображение: 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<div class="wrapper" id='front-end-engineer' style="height:600px;position: relative;margin-top:50px;">
<canvas id="mychart2" style="display: block; width: 958px; height: 478px;"></canvas>
</div>
<script>
var canvas2 = document.getElementById("mychart2");
var ctx2 = canvas2.getContext('2d');
const decimals2 = 0;
var config2 = {
type: 'line',
data: {
labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9 '],
datasets: [{
label: "25th Percentile",
backgroundColor: '#c4c1ff',
pointBackgroundColor: "#645bff",
borderColor: '#645bff',
fill: 4,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3, //no fill here
data: [31, 32, 35, 42, 50, 50, 58, 60, 74]
}, {
label: "10th - 90th Percentile",
backgroundColor: '#c4c1ff',
pointBackgroundColor: "#c4c1ff",
borderColor: '#c4c1ff',
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderWidth: 1,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
fill: 3,
//no fill here
data: [36, 45, 45, 55, 55, 59, 75, 85, 119]
}, {
label: "Median",
backgroundColor: '#0d0e25',
pointBackgroundColor: "#0d0e25",
borderColor: '#0d0e25',
borderWidth: 1,
pointRadius: 2,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
fill: false, //no fill here
data: [31, 38, 40, 45, 50, 55, 60, 75, 90]
},
{
label: "25th - 75th Percentile",
showInLegend: false,
backgroundColor: '#645bff',
pointBackgroundColor: "#645bff",
borderColor: '#645bff',
pointRadius: 0,
lineTension: 0.1,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
fill: 0,
//fill until previous dataset
data: [34, 42, 45, 50, 54, 58, 66, 80, 110]
}, {
label: "10th Percentile",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderColor: "#c4c1ff",
pointStyle: "circle",
borderWidth: 1,
lineWidth: 1,
hoverRadius: 9,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
lineTension: 0.3,
fill: '0',
data: [25, 30, 36, 39, 45, 49, 53, 56, 60, 68]
}
]
},
options: {responsive:true,maintainAspectRatio:false,
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label = ': ';
}
if (label === "25th - 75th Percentile: ") {
label = "75th Percentile: "
}
if (label === "10th - 90th Percentile: ") {
label = "90th Percentile: "
}
label = tooltipItem.yLabel
return label;
}
}
},
title: {
display: true,
text: 'Backend Engineer salaries (1242 datapoints)',
fontSize: 20,position:'top'
},
maintainAspectRatio: false,
legend: {
onClick: (e) => e.stopPropagation(),
display: true,
labels: {
filter: function(item,
mychart2) {
return item.datasetIndex !== 0 amp;amp; item.datasetIndex !== 4;
}
}
},
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: { yAxes: [{
id: 'a',
type: 'linear',
position: 'left',
gridLines: {
drawOnChartArea:false
},
scaleLabel: {
display: true,
labelString: 'Salary',
fontSize: 20
},
ticks: {
beginAtZero: true,
stepSize: 20,
callback: function(value, index, values) {
return '
value.toFixed(decimals)
}
}
}, {
id: 'b',
type: 'linear',
position: 'right',
ticks: {
display: false},
gridLines: {
lineWidth:0.5
},
scaleLabel: {
display: false
},
ticks: {
display: false,
beginAtZero: true,
stepSize: 20
}
}] ,xAxes: [{
gridLines: {
drawOnChartArea:false
},
ticks: {
beginAtZero: true,
stepSize: 20,
},
scaleLabel: {
display: true,
labelString: 'Years of relevant experience',
fontSize: 20
}
}]
}
}
};
var chart2 = new Chart(ctx2, config2);
</script>