116 lines
4.2 KiB
PHP
116 lines
4.2 KiB
PHP
<div class='milestone-chart' id='milestoneChart'>
|
|
<div class='chart-canvas scrollbar-hover'>
|
|
<div class='chart-wrapper'>
|
|
<canvas width='400' height='120' data-responsive='true'></canvas>
|
|
</div>
|
|
</div>
|
|
<div class='chart-unit'><?php echo "({$lang->execution->workHour})";?></div>
|
|
<div class='chart-legend'>
|
|
<span class="barline line-pv">PV</span>
|
|
<span class="barline line-ev">EV</span>
|
|
<span class="barline line-ac">AC</span>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.milestone-chart {position: relative}
|
|
.milestone-chart .chart-canvas {overflow: auto; max-width: 1002px}
|
|
.milestone-chart .chart-wrapper {background: none; padding: 15px 0 0 0}
|
|
.milestone-chart .chart-unit {position: absolute; left: 10px; top: 0;}
|
|
.milestone-chart .chart-legend {position: absolute; right: 5px; top: 0;}
|
|
.milestone-chart .barline {padding-left: 20px; position: relative; display: inline-block; line-height: 20px}
|
|
.milestone-chart .barline + .barline {margin-left: 5px}
|
|
.milestone-chart .barline:before {content: ' '; display: block; position: absolute; top: 8px; left: 0; width: 16px; height: 3px; background: #0c64eb}
|
|
.milestone-chart .barline.line-ev:before {background: rgb(0, 218, 136)}
|
|
.milestone-chart .barline.line-ac:before {background: rgb(255, 145, 0)}
|
|
</style>
|
|
<script>
|
|
function initMilestoneChart()
|
|
{
|
|
var data =
|
|
{
|
|
labels: <?php echo json_encode($charts['labels'])?>,
|
|
datasets: [
|
|
{
|
|
label: 'PV',
|
|
color: '#0c64eb',
|
|
pointColor: '#0c64eb',
|
|
pointStrokeColor: '#0c64eb',
|
|
pointHighlightStroke: '#0c64eb',
|
|
fillColor: 'rgba(0,106,241, .07)',
|
|
pointHighlightFill: '#fff',
|
|
data: <?php echo $charts['PV']?>
|
|
},
|
|
{
|
|
label: 'EV',
|
|
color: 'rgb(0, 218, 136)',
|
|
pointColor: 'rgb(0, 218, 136)',
|
|
pointStrokeColor: 'rgb(0, 218, 136)',
|
|
pointHighlightStroke: 'rgb(0, 218, 136)',
|
|
fillColor: 'rgb(0, 218, 136, .07)',
|
|
pointHighlightFill: '#fff',
|
|
data: <?php echo $charts['EV']?>
|
|
},
|
|
{
|
|
label: 'AC',
|
|
color: 'rgb(255, 145, 0)',
|
|
pointColor: 'rgb(255, 145, 0)',
|
|
pointStrokeColor: 'rgb(255, 145, 0)',
|
|
pointHighlightStroke: 'rgb(255, 145, 0)',
|
|
fillColor: 'rgb(255, 145, 0, .07)',
|
|
pointHighlightFill: '#fff',
|
|
data: <?php echo $charts['AC']?>
|
|
}]
|
|
};
|
|
|
|
var betterWidth = data.labels.length * 15;
|
|
var renderChart = function()
|
|
{
|
|
var $chart = $('#milestoneChart');
|
|
var $wrapper = $chart.find('.chart-wrapper');
|
|
var $canvas = $chart.find('canvas');
|
|
var $chartCanvas = $chart.find('.chart-canvas');
|
|
if (betterWidth > 400)
|
|
{
|
|
var updateWrapperSize = function()
|
|
{
|
|
$wrapper.hide();
|
|
$chartCanvas.css('max-width', 'initial');
|
|
var maxWidth = $chartCanvas.width();
|
|
$chartCanvas.css('max-width', maxWidth);
|
|
$chart.toggleClass('has-scrollbar', maxWidth < betterWidth);
|
|
$wrapper.show();
|
|
};
|
|
updateWrapperSize();
|
|
$(window).on('resize', updateWrapperSize);
|
|
|
|
$wrapper.css('min-width', betterWidth);
|
|
$canvas.attr(
|
|
{
|
|
width: betterWidth,
|
|
height: Math.min(200, Math.floor(betterWidth / 4))
|
|
});
|
|
}
|
|
$canvas.lineChart(data,
|
|
{
|
|
animation: betterWidth < 400,
|
|
pointDotStrokeWidth: 1,
|
|
pointDotRadius: 2,
|
|
datasetStrokeWidth: 2,
|
|
datasetFill: false,
|
|
datasetStroke: true,
|
|
scaleShowBeyondLine: true,
|
|
responsive: true,
|
|
bezierCurve: false,
|
|
scaleFontColor: '#838A9D',
|
|
tooltipXPadding: 10,
|
|
tooltipYPadding: 10,
|
|
multiTooltipTitleTemplate: '<%= label %> <?php echo $lang->execution->workHour;?> /h',
|
|
multiTooltipTemplate: '<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>',
|
|
});
|
|
}
|
|
|
|
setTimeout(renderChart, betterWidth > 200 ? 100 : 10);
|
|
}
|
|
initMilestoneChart();
|
|
</script>
|