집 > 기사 > 웹 프론트엔드 > hightcharts 히스토그램 가변 폭 연속 시간 척도

hightcharts 히스토그램 가변 폭 연속 시간 척도

坏嘻嘻원래의: 2018-09-14 10:17:151804검색

이전에 Div 줄 바꿈과 줄 바꿈이 아닌 CSS 작성 방법을 정리했습니다. 그러나 테이블 셀의 경우, 줄바꿈을 방지할 수 있는 nowrap이라는 하나의 속성만 알고 있습니다. 최근에 이런 요구가 있었지만 nowrap을 추가하면 어떤 경우에는 여전히 줄 바꿈이 발생한다는 것을 발견했습니다! 불행하게도 강제로 줄 바꿈을 하지 않게 할 수 있는 방법은 없나요? 한동안 Baidu를 검색했는데 정말 방법을 찾았고 문제가 해결되었습니다.

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>

hightcharts 히스토그램 가변 폭 연속 시간 척도

관련 기사