我有一个项目,我将一些示例样本数据放在一起。我需要以特定的方式格式化图例,以便我无法使用Chart.JS,因此我实现了自定义HTML版本。请参阅以下示例:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!--
NOT USED FOR THIS EXAMPLE
<script src="data.js"></script>
-->
<script src="https://codepen.io/EtherealBug/pen/bMZJWQ.js"></script>
<div id="image" class="canvas-container">
<div class="canvas-container-inner">
<canvas id="myChart"></canvas>
</div>
<span id="js" class="chart-legend"> </span>
<div id="js-legend" class="chart-legend">
</div>
</div>
<style>
canvas {
width: 100% !important;
max-width: 2000px;
height: auto !important;
}
#js-legend {
/*width: 130px;*/
background-color: rgba(0, 0, 0, 0);
margin-top: 1.25%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/*chart.js default*/
font-size: .85em;
font-weight: bold;
color: #666;
/*chart.js default*/
}
#js {
float: left;
width: 2em;
height: 0.25em;
background: black;
margin-top: 1em;
margin-left: 10%;
}
#image {
border: 2px solid rgba(102, 102, 102, .2);
}
</style>
<script>
var labels = jsonfile.jsonarray.map(function(e) {
return e.Time;
});
var data = jsonfile.jsonarray.map(function(e) {
return e.Speed;
});
var ctx = myChart.getContext('2d');
var config = {
options: {
legend: {
display: false,
},
title: {
display: true,
text: "Steady State",
fontSize: 25,
padding: 25,
},
scales: {
xAxes: [{
scaleLabel: {
fontSize: 14,
fontStyle: 'bold',
display: true,
labelString: 'Time (days)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 9,
fontStyle: 'bold',
minRotation: 0,
maxRotation: 0,
callback: function(label, index, labels) {
switch (label) {
case 1:
return '1';
case 222:
return '2';
case 443:
return '3';
case 664:
return '4';
case 885:
return '5';
case 1106:
return '6';
case 1327:
return '7';
case 1548:
return '8';
case 1769:
return '9';
case 1993:
return '10';
}
}
},
}],
yAxes: [{
scaleLabel: {
fontSize: 14,
fontStyle: 'bold',
display: true,
labelString: 'Concentration (\u03BCM)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 10,
fontStyle: 'bold',
},
}],
},
},
type: 'line',
data: {
labels: labels,
datasets: [{
lineTension: 0.4, //defaul val = 0.4
pointBackgroundColor: 'rgba(0,0,0,0)',
pointBorderColor: 'rgba(0,0,0,0)',
borderColor: 'black',
borderWidth: 4,
fill: false,
label: 'steady state',
data: data,
}]
}
};
var jsLegend = document.getElementById("js-legend");
jsLegend.innerHTML = '\xa0' + "steady state";
var chart = new Chart(ctx, config);
</script>
&#13;
内容需要响应,这是我遇到麻烦的地方。描绘“稳定状态”颜色的线条。数据应在标签的垂直中心线上对齐。如果调整窗口大小,它会垂直移动。我无法弄清楚如何将线元素的边缘顶部距离与“稳定状态”的边缘距离联系起来。元素&#39; S
答案 0 :(得分:1)
试试这个。我已经对你的&#34;#js&#34;做了一些改变。和#34;#js-legend&#34;并将它们封在一个div中。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!--
NOT USED FOR THIS EXAMPLE
<script src="data.js"></script>
-->
<script src="https://codepen.io/EtherealBug/pen/bMZJWQ.js"></script>
<div id="image" class="canvas-container">
<div class="canvas-container-inner">
<canvas id="myChart"></canvas>
</div>
<div id="enclosed-js">
<span id="js" class="chart-legend"> </span>
<span id="js-legend" class="chart-legend"></span>
</div>
</div>
<style>
canvas {
width: 100% !important;
max-width: 2000px;
height: auto !important;
}
#enclosed-js{
position: relative;
margin-top: 1.25%;
margin-left: 10%;
}
#js-legend {
/*width: 130px;*/
background-color: rgba(0, 0, 0, 0);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/*chart.js default*/
font-size: .85em;
font-weight: bold;
color: #666;
margin-left: 2.1em;
/*chart.js default*/
}
#js {
float: left;
width: 2em;
height: 0.25em;
background: black;
position:absolute;
top: 50%;
}
#image {
border: 2px solid rgba(102, 102, 102, .2);
}
</style>
<script>
var labels = jsonfile.jsonarray.map(function(e) {
return e.Time;
});
var data = jsonfile.jsonarray.map(function(e) {
return e.Speed;
});
var ctx = myChart.getContext('2d');
var config = {
options: {
legend: {
display: false,
},
title: {
display: true,
text: "Steady State",
fontSize: 25,
padding: 25,
},
scales: {
xAxes: [{
scaleLabel: {
fontSize: 14,
fontStyle: 'bold',
display: true,
labelString: 'Time (days)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 9,
fontStyle: 'bold',
minRotation: 0,
maxRotation: 0,
callback: function(label, index, labels) {
switch (label) {
case 1:
return '1';
case 222:
return '2';
case 443:
return '3';
case 664:
return '4';
case 885:
return '5';
case 1106:
return '6';
case 1327:
return '7';
case 1548:
return '8';
case 1769:
return '9';
case 1993:
return '10';
}
}
},
}],
yAxes: [{
scaleLabel: {
fontSize: 14,
fontStyle: 'bold',
display: true,
labelString: 'Concentration (\u03BCM)'
},
ticks: {
autoSkip: true,
maxTicksLimit: 10,
fontStyle: 'bold',
},
}],
},
},
type: 'line',
data: {
labels: labels,
datasets: [{
lineTension: 0.4, //defaul val = 0.4
pointBackgroundColor: 'rgba(0,0,0,0)',
pointBorderColor: 'rgba(0,0,0,0)',
borderColor: 'black',
borderWidth: 4,
fill: false,
label: 'steady state',
data: data,
}]
}
};
var jsLegend = document.getElementById("js-legend");
jsLegend.innerHTML = '\xa0' + "steady state";
var chart = new Chart(ctx, config);
</script>
&#13;