helixxchi

テクノロジープログラミング一般的なカテゴリ

大きなチャート-チャートJsダッシュボードテンプレート-JavaScriptチャートの5つのベストピック

23 9月 2021

大きなチャートの例、ここでは、驚くべき見栄えの良いグラフとチャートを備えたダッシュボードブートストラップテンプレートを無料でダウンロードできます。大きなグラフの管理者は、非常に柔軟な棒グラフ、強力な折れ線グラフ、クリーンでモダンなpolarArea、Chartjsを使用したバブルとドーナツのレスポンシブダッシュボードテンプレートです。

大きなチャート–始めるための6つのChart.jsサンプルチャート

大きなチャート–プロジェクトファイルの構造

Include External Js Libs –index.htmlを追加しました
ボディパーツを追加– index.html
フッターにjQuery / JavaScriptコードを追加– – index.html
CSSコードを追加-index.html

ステップ1：インクルード外部Jsライブラリを追加

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>big charts - Admin panel dashboard card design usign html and css - www.pakainfo.com</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:100,200,400,500,600" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>

<!DOCTYPE html>

<head>

<title>big charts - Admin panel dashboard card design usign html and css - www.pakainfo.com</title>

</head>

ステップ2：ボディパーツを追加

index.html

<body>
<div class="container-fluid">
  <h2>big charts Example</h2>
  <p>The Investor and Traders web site</p>
  <p>BigCharts is the world's leading and most advanced investment charting and research site.</p>
  <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">
    	<div class="isResizable">
	  <div class="chart-container">
	    <canvas id="chart1"></canvas>
	  </div>
	</div>
    </div>
    <div class="col-sm-6" style="background-color:lavenderblush;">
    	<div class="isResizable">
		  <div class="chart-container">
		    <canvas id="chart2"></canvas>
		  </div>
		</div>
    </div>
  </div>
<hr/>
  <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">
    	<div class="isResizable">
		  <div class="chart-container">
		    <canvas id="chart3"></canvas>
		  </div>
		</div>
    </div>
    <div class="col-sm-6" style="background-color:lavender;">
    	<div class="isResizable">
		  <div class="chart-container">
		    <canvas id="chart4"></canvas>
		  </div>
		</div>
    </div>
  </div>
</div>

<hr/>
  <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">
    	<div class="isResizable">
		  <div class="chart-container">
		    <canvas id="chart5"></canvas>
		  </div>
		</div>
    </div>
    <div class="col-sm-6" style="background-color:lavender;">
    	<div class="isResizable">
		  <div class="chart-container">
		    <canvas id="chart6"></canvas>
		  </div>
		</div>
    </div>
  </div>
</div>
</body>

<body>

<h2>big charts Example</h2>

<p>The Investor and Traders web site</p>

<p>BigCharts is the world's leading and most advanced investment charting and research site.</p>

</div>

</div>

<hr/>

</div>

</div>

<hr/>

</div>

</div>

</body>

ステップ3：フッターにスクリプトコードを追加

index.html

<script type="text/javascript">
	window.chartColors = {
	red: 'rgb(255, 99, 132)',
	orange: 'rgb(255, 159, 64)',
	yellow: 'rgb(255, 205, 86)',
	green: 'rgb(75, 192, 192)',
	blue: 'rgb(54, 162, 235)',
	purple: 'rgb(153, 102, 255)',
	grey: 'rgb(201, 203, 207)'
};

window.randomScalingFactor = function() {
	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};

var config = {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "Unfilled",
            fill: false,
            backgroundColor: window.chartColors.blue,
            borderColor: window.chartColors.blue,
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()
            ],
        }, {
            label: "Dashed",
            fill: false,
            backgroundColor: window.chartColors.green,
            borderColor: window.chartColors.green,
            borderDash: [5, 5],
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()
            ],
        }, {
            label: "Filled",
            backgroundColor: window.chartColors.red,
            borderColor: window.chartColors.red,
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()
            ],
            fill: true,
        }]
    },
    options: {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
            position: 'top'
        },
        title: {
            position: 'top',
            display: true,
        },
        tooltips: {
            mode: 'index',
            intersect: false,
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Month'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Value'
                }
            }]
        }
    }
};

//Draw chart
window.onload = function() {

	//chart 1
    var chart1 = document.getElementById("chart1").getContext("2d");
    config.type = 'bar';
    config.options.title.text = 'Resizable Bar Chart';
    window.myLine = new Chart(chart1, config);

    //chart 2
    var chart2 = document.getElementById("chart2").getContext("2d");
    config.type = 'line';
    config.options.title.text = 'Resizable Line Chart';
    window.myLine = new Chart(chart2, config);

    //chart 3
    var chart3 = document.getElementById("chart3").getContext("2d");
    config.type = 'bubble';
    config.options.title.text = 'Resizable bubble Chart';
    window.myLine = new Chart(chart3, config);

     //chart 4
    var chart4 = document.getElementById("chart4").getContext("2d");
    config.type = 'doughnut';
    config.options.title.text = 'Resizable doughnut Chart';
    window.myLine = new Chart(chart4, config);

    //chart 5
    var chart5 = document.getElementById("chart5").getContext("2d");
    config.type = 'polarArea';
    config.options.title.text = 'Resizable polarArea Chart';
    window.myLine = new Chart(chart5, config);

     //chart 6
    var chart6 = document.getElementById("chart6").getContext("2d");
    config.type = 'radar';
    config.options.title.text = 'Resizable radar Chart';
    window.myLine = new Chart(chart6, config);    
};

//Update type of chart 
$('#updateChart').click(function(e) {
    var chart = window.myLine;
    var types = ['line', 'bar', 'bubble', 'doughnut','polarArea','radar'];
  
    chart.config.type = types[Math.floor(Math.random()*3)];
    chart.destroy();

    var ctx = document.getElementById("chart").getContext("2d");
    window.myLine = new Chart(ctx, chart.config);
});

//Use JQUeryUI to resize the div with IE 11
$(".isResizable").resizable();


</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

window.chartColors = {

red: 'rgb(255, 99, 132)',

orange: 'rgb(255, 159, 64)',

yellow: 'rgb(255, 205, 86)',

green: 'rgb(75, 192, 192)',

blue: 'rgb(54, 162, 235)',

purple: 'rgb(153, 102, 255)',

grey: 'rgb(201, 203, 207)'

};

window.randomScalingFactor = function() {

return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);

};

var config = {

type: 'line',

data: {

labels: ["January", "February", "March", "April", "May", "June", "July"],

datasets: [{

label: "Unfilled",

fill: false,

backgroundColor: window.chartColors.blue,

borderColor: window.chartColors.blue,

data: [

randomScalingFactor(),

randomScalingFactor()

}, {

label: "Dashed",

fill: false,

backgroundColor: window.chartColors.green,

borderColor: window.chartColors.green,

borderDash: [5, 5],

data: [

randomScalingFactor(),

randomScalingFactor()

}, {

label: "Filled",

backgroundColor: window.chartColors.red,

borderColor: window.chartColors.red,

data: [

randomScalingFactor(),

randomScalingFactor()

fill: true,

}]

options: {

maintainAspectRatio: false,

responsive: true,

legend: {

position: 'top'

title: {

position: 'top',

display: true,

tooltips: {

mode: 'index',

intersect: false,

hover: {

mode: 'nearest',

intersect: true

scales: {

xAxes: [{

display: true,

scaleLabel: {

display: true,

labelString: 'Month'

}

}],

yAxes: [{

display: true,

scaleLabel: {

display: true,

labelString: 'Value'

}

}]

}

};

//Draw chart

window.onload = function() {

//chart 1

var chart1 = document.getElementById("chart1").getContext("2d");

config.type = 'bar';

config.options.title.text = 'Resizable Bar Chart';

window.myLine = new Chart(chart1, config);

//chart 2

var chart2 = document.getElementById("chart2").getContext("2d");

config.type = 'line';

config.options.title.text = 'Resizable Line Chart';

window.myLine = new Chart(chart2, config);

//chart 3

var chart3 = document.getElementById("chart3").getContext("2d");

config.type = 'bubble';

config.options.title.text = 'Resizable bubble Chart';

window.myLine = new Chart(chart3, config);

//chart 4

var chart4 = document.getElementById("chart4").getContext("2d");

config.type = 'doughnut';

config.options.title.text = 'Resizable doughnut Chart';

window.myLine = new Chart(chart4, config);

//chart 5

var chart5 = document.getElementById("chart5").getContext("2d");

config.type = 'polarArea';

config.options.title.text = 'Resizable polarArea Chart';

window.myLine = new Chart(chart5, config);

//chart 6

var chart6 = document.getElementById("chart6").getContext("2d");

config.type = 'radar';

config.options.title.text = 'Resizable radar Chart';

window.myLine = new Chart(chart6, config);

};

//Update type of chart

$('#updateChart').click(function(e) {

var chart = window.myLine;

var types = ['line', 'bar', 'bubble', 'doughnut','polarArea','radar'];

chart.config.type = types[Math.floor(Math.random()*3)];

chart.destroy();

var ctx = document.getElementById("chart").getContext("2d");

window.myLine = new Chart(ctx, chart.config);

});

//Use JQUeryUI to resize the div with IE 11

$(".isResizable").resizable();

</script>

ステップ4：CSSコードを追加する

index.html

<style type="text/css">
body {  
  padding: 16px;
  background-color: #e8e8e8;
}

/* See http://www.chartjs.org/docs/latest/general/responsive.html */
.chart-container {
  position: relative;
  height: 100%;
  width: 100%;
}

.isResizable {
  background-color: #ffffff;
  margin: 0px auto;
  padding: 5px;
  border: 1px solid #d8d8d8;
  overflow: hidden;
  /* Not usable in IE */
  /* resize: both; */
  
  width: 800px;
  height: 400px;
  min-width: 280px;
  min-height: 280px;
  max-width: 1200px;
  max-height: 600px;
}

#updateChart {
    background: white;
    border: 1px solid #d8d8d8;
    width: 160px;
    padding: 10px;
}
</style>

body {

padding: 16px;

background-color: #e8e8e8;

}

/* See http://www.chartjs.org/docs/latest/general/responsive.html */

.chart-container {

position: relative;

height: 100%;

width: 100%;

}

.isResizable {

background-color: #ffffff;

margin: 0px auto;

padding: 5px;

border: 1px solid #d8d8d8;

overflow: hidden;

/* Not usable in IE */

/* resize: both; */

width: 800px;

height: 400px;

min-width: 280px;

min-height: 280px;

max-width: 1200px;

max-height: 600px;

}

#updateChart {

background: white;

border: 1px solid #d8d8d8;

width: 160px;

padding: 10px;

}

</style>

チャートjs折れ線グラフのサイズ

チャートjsバブルチャートサイズ

チャートjsドーナツチャートサイズ

チャートjspolarareaチャートサイズ

チャートjsレーダーチャートサイズ

お見逃しなく：複数のデータを使用してExcelで棒グラフを作成するにはどうすればよいですか？

私はあなたがについてのアイデアを得ることを願っています BigCharts：株価チャート、スクリーナー、インタラクティブチャート。
フィードバックをお願いします infinityknow.com。
この記事に関する貴重なフィードバック、質問、コメントはいつでも歓迎します。
この投稿を楽しんで気に入った場合は、共有することを忘れないでください。

参考資料 : www.pakainfo.com