• 技术文章 >web前端 >css教程

    hightcharts 柱状图可变宽 无缝 时间刻度

    坏嘻嘻坏嘻嘻2018-09-14 10:17:15原创1200

    以前总结过Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。 近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个强制不换行的方法吗? baidu了一下,令俺非常欣慰,还真的找到了办法,问题解决了。

    Highcharts.chart('container', {
    	chart: {
    		type: 'variwide' // varwide 依赖 varwide.js
    	},
    	title: {
    		text: '机器状态图'
    	},
    	subtitle: {
    		text: '数据来源:<a href="http://ec.europa.eu/eurostat/web/' +
    		'labour-market/labour-costs/main-tables">eurostat</a>'
    	},
    	xAxis: {
    		categories: [
    			'2018-09-01',
    			'2018-09-02',
    			'2018-09-03',
    			'2018-09-01',
    			'2018-09-02',
    			'2018-09-03',
    			'2018-09-01',
    			'2018-09-02',
    			'2018-09-03',
    			'2018-09-01',
    			'2018-09-02',
    			'2018-09-03',
    			'2018-09-04'
    		],
    		crosshair: true
    	},
    	legend: {
    		enabled: true
    	},
    	series: [{
    		data: [
    			['正常', 1, 2122],
    			['调机', 1, 2311],
    			['待机', 1, 1111],
    			['正常', 1, 122],
    			['调机', 1, 2311],
    			['待机', 1, 1111],
    			['正常', 1, 122],
    			['调机', 1, 2311],
    			['待机', 1, 1111],
    			['正常', 1, 2122],
    			['调机', 1, 2311],
    			['待机', 1, 1111],
    			['修模',1, 3212]
    		],
    		colors:['#26B99A','#E74C3C','#FFFF37','#26B99A','#E74C3C','#FFFF37','#26B99A','#E74C3C','#FFFF37','#26B99A','#E74C3C','#FFFF37','#FFE4C4'],
    		colorByPoint: true,
    	}]
    });


    20180914083804813.jpg

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="utf-8">	<meta name="viewport" content="width=device-width, initial-scale=1">
            <meta http-equiv="x-ua-compatible" content="ie=edge">
            <link rel="icon" href="https://static.jianshukeji.com/hcode/images/favicon.ico">
            <style>
                /* css 代码  */
            </style>
            <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
            <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
            <script src="https://img.hcharts.cn/highcharts/modules/variwide.js"></script>
        </head>
        <body>
            <p id="container"></p>
            <script>
                // JS 代码 
            </script>
        </body>
    </html>

    相关推荐:

    JS轻松实现CSS设置,DIV+CSS常用CSS设置_javascript技巧

    css强制换行 css强制不换行的css方法_经验交流


    以上就是hightcharts 柱状图可变宽 无缝 时间刻度的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:hightcharts,css
    上一篇:CSS中overflow-y: visible;不起作用的解决方法 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 如何用CSS3和Js制作响应式导航条• 如何用css制作一个能够兼容所有浏览器的三角形• 父div高度不能自适应子div高度的解决方案_CSS/HTML• CSS3中Transition属性详解以及示例分享_CSS/HTML
    1/1

    PHP中文网