ホームページ > 記事 > ウェブフロントエンド > ハイチャートヒストグラム可変幅シームレスなタイムスケール

ハイチャートヒストグラム可変幅シームレスなタイムスケール

坏嘻嘻オリジナル: 2018-09-14 10:17:151822ブラウズ

以前Div改行と非改行のCSSの書き方をまとめました。しかし、表のセルの場合、折り返しを防ぐことができる属性 nowrap が 1 つだけわかっています。最近このニーズがあったのですが、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>

関連する推奨事項: CSS 設定を簡単に実装するための

JS , DIV CSS よく使われるCSS設定_javascriptスキル

css強制改行CSSで改行を強制しない方法_エクスペリエンス交換

以上がハイチャートヒストグラム可変幅シームレスなタイムスケールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css JS

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Overflow-y: CSS では表示されない解決策次の記事：Overflow-y: CSS では表示されない解決策

続きを見る

ハイチャート ヒストグラム 可変幅 シームレスなタイムスケール

関連記事

ハイチャートヒストグラム可変幅シームレスなタイムスケール