<html style='width:100%'>
<head>
<meta charset="UTF-8">
<title>End2end Test Runner</title>
<link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="https://github.com/tmmdata/chartist-plugin-tooltip/blob/master/dist/chartist-plugin-tooltip.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/chartist-plugin-tooltips@0.0.17"></script>
</head>
<body style='width:100%'>
<div id='chartHiddenLine' class='datcharts' style="height:300px;width:70%;position:absolute ;top:30px;left:40px"></div>
<div id='chartLine' class='datcharts' style="height:300px;width:70%;position:absolute ;top:30px;left:40px"></div>
<div id='chartBar' class='datcharts' style="height:300px;width:70%;position:absolute ;top:30px;left:40px"></div>
</body>
<script type="text/javascript">
var data0 = {
labels: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
series: [
{
data:[
{value:5,meta:'01'},
{value:4,meta:'02'},
{value:2,meta:'03'},
{value:4,meta:'04'},
{value:2,meta:'05'},
{value:4,meta:'06'},
{value:6,meta:'07'},
{value:6,meta:'08'},
{value:4,meta:'09'},
{value:4,meta:'10'},
{value:7,meta:'11'},
{value:5,meta:'12'},
]
}
]
};
var data1 = {
labels: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
series: [
{
data:[
{value:15,meta:'01'},
{value:14,meta:'02'},
{value:12,meta:'03'},
{value:14,meta:'04'},
{value:12,meta:'05'},
{value:14,meta:'06'},
{value:16,meta:'07'},
{value:2,meta:'08'},
{value:5,meta:'09'},
{value:7,meta:'10'},
{value:8,meta:'11'},
{value:15,meta:'12'},
]
}
]
};
var maxData = 18;
var index_chartLine1;
var index_chartBar1;
var tip;
new Chartist.Bar('#chartBar', data0, {
low: 0,
onlyInteger: true,
fullWidth: false,
chartPadding: {
right: 40
},
axisY: {
position: 'start'
},
showArea: false,
axisX: {
showGrid: false,
},
showPoint: true,
plugins: [
Chartist.plugins.tooltip({
tooltipFnc:function(index){
index_chartBar1 = index;
return (index_chartBar1+'<br/>'+tip).replace('xxx',data1.series[0].data[parseInt(index_chartBar1)].value);
},
transformTooltipTextFnc:function(e){
tip = '描述1: xxx 单位1' + '<br/>描述2: '+e+' 单位2';
return tip;
},
anchorToPoint: false
})
]
});
new Chartist.Line('#chartLine', data1, {
low: 0,
onlyInteger: true,
fullWidth: false,
chartPadding: {
right: 40
},
axisX: {
showLabel: false,
showGrid: false,
},
axisY: {
showLabel: false,
position: 'start',
showGrid: false,
},
plugins: [
Chartist.plugins.tooltip({
tooltipFnc:function(index){
index_chartLine1 = index;
return (index_chartLine1+'<br/>'+tip).replace('xxx',data0.series[0].data[parseInt(index_chartLine1)].value);
},
transformTooltipTextFnc:function(e){
tip = '描述1: '+ e+' 单位1' + '<br/>描述2: xxx 单位2';
return tip;
},
anchorToPoint: false
})
]
})
.on('draw', function(context) {
//因为折线图和柱状图的x轴label显示不太一样,所以把折线图的点往后挪一挪
if(['point', 'line'].indexOf(context.type) !== -1) {
context.element.attr({
transform: 'translate(' + context.axisX.stepLength / 2 + ')'
});
}
});
new Chartist.Line('#chartHiddenLine', [], {
high: maxData + 1,
low: 0,
onlyInteger: true,
fullWidth: false,
chartPadding: {
right: 0
},
axisY: {
position: 'end',
showGrid: false,
},
axisX: {
showGrid: false,
}
});
</script>
</html>
.chartist-tooltip {
position: relative;
display: inline-block;
opacity: 0;
min-width: 5em;
padding: .5em;
background: #f4c63d;
color: #453d3f;
text-align: center;
pointer-events: none;
z-index: 1;
transition: opacity .2s linear;
transition: opacity .2s linear;
transition: opacity .2s linear;
transition: opacity .2s linear;
}
.chartist-tooltip:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
margin-left: -15px;
border: 15px solid transparent;
border-top-color: #f4c63d;
}
.chartist-tooltip.tooltip-show {
opacity: 1;
}
.ct-area,
.ct-line {
pointer-events: none;
}
.datcharts {
pointer-events: none
}
.datcharts .ct-point {
pointer-events: auto
}
.datcharts .ct-bar {
pointer-events: auto
}
#chartLineLine .ct-label.ct-label.ct-horizontal {
position: absolute;
justify-content: flex-end;
text-align: right;
transform-origin: 100% 0;
transform: translate(-100%);
}
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |