Home > Article > Web Front-end > hightcharts histogram variable width seamless time scale

hightcharts histogram variable width seamless time scale

坏嘻嘻Original: 2018-09-14 10:17:151798browse

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,
	}]
});

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

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!

css JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Overflow-y: visible; in CSS does not work solutionNext article：Overflow-y: visible; in CSS does not work solution

See more

hightcharts histogram variable width seamless time scale

Related articles