| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title></title>
- </head>
- <body>
- <div id="mountNode"></div>
- <script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.9/g2.min.js"></script>
- <script>
- var data = {{placeholder}};
- const chart = new G2.Chart({
- container: 'mountNode', // 指定图表容器 ID
- height: data.length * 22, // 指定图表高度
- forceFit: true,
- padding: 'auto',
- });
- // Step 2: 载入数据源
- chart.source(data, {
- range: {
- type: 'time',
- mask: 'HH:mm:ss',
- nice: true,
- },
- });
- chart
- .coord()
- .transpose()
- .scale(1, -1);
- chart.legend({ position: 'top' });
- chart.tooltip({
- showTitle: false,
- itemTpl: '<li>{duration}ms: {name} </li>'
- });
- chart
- .interval()
- .position('title*range')
- .color('type')
- .tooltip('name*duration', (name, duration) => ({ name, duration }))
- .size(5);
- chart.render();
- </script>
- </body>
- </html>
|
