Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!doctype html>
<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;
  -webkit-transition: opacity .2s linear;
  -moz-transition: opacity .2s linear;
  -o-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

Dismiss x
public
Bin info
helloc010pro
0viewers