hightcharts histogram variable width seamless time scale-CSS Tutorial-php.cn

hightcharts histogram variable width seamless time scale

坏嘻嘻

Release： 2018-09-14 10:17:15

Original

1858 people have browsed it

I have previously summarized the css writing methods of Div line breaks and non-line breaks. But for table cells, we only know one attribute, nowrap, which can prevent it from wrapping. I have had this need recently, but I found that adding nowrap will still cause line breaks in some cases! Unfortunately, is there no way to force no line breaks? I searched Baidu for a while, which made me very happy. I really found a way and the problem was solved.

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

Copy after login

hightcharts histogram variable width seamless time scale

<!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>

Copy after login

Related recommendations:

JS to easily implement CSS settings, DIV CSS commonly used CSS settings_javascript skills

css forced line break css method to force no line break_experience exchange

The above is the detailed content of hightcharts histogram variable width seamless time scale. For more information, please follow other related articles on the PHP Chinese website!