chart.ｊｓグラフチャート表示例とカスタマイズ

シリウスカスタマイズＴＯＰ＞シリウスサイトにグラフチャートを表示させよう＞ chart.ｊｓグラフチャート表示例とカスタマイズ

chart.ｊｓグラフチャート表示例および比較範囲の編集方法

chart.ｊｓのグラフチャートはデフォルトでも複数用意されています

用意されているファイルより記述を確認し編集することで　コンテンツに
合わせた比較　範囲の表示指定をします

用意されているファイルはどこにあるかですが

ダウンロードファイルchart.ｊｓ　masterに梱包されている

ｓａｍｐｌｅｓファイルを開いてフォルダーをマウス操作で開きますと

scriptの動きが確認できソースを表示すれば記述詳細が理解できます

ソース表示でファイルを確認してみましょう

以下記載.barhtml例

<!doctype html>
<html>
<head>
<title>Bar Chart</title>
<script src="../Chart.js"></script>
</head>

<body>

　　　　　　　　ページに記載する項目
<div style="width: 50%">　
<canvas id="canvas" height="450" width="600"></canvas>
</div>

ここから下の記載は　シリウスに配置する場合head内となり
コピーして貼り付け後　詳細をカスタマイズします

var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
highlightFill : "rgba(151,187,205,0.75)",
highlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]

}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
}

</script>
</body>
</html>

ここまで

表示に使用されるカラーコードは　rgbaです
rgba(220,220,220,0.5)

はて、ここでお気が付きでしょうがグラフとしては表示される構造の記述は
確認できた

しかし、はて、範囲を指定するカスタマイズはいずこで？

sampleファイルの画面デモ表示ではマウス操作で範囲指定の
比較数値が表示されるのですが

何処で指定して表しているのか？

ですね

指定を出来なければグラフの意味がないですもんね

sampleファイルでは、docsファイルから指示を読み込んでいるので
ソースでは指定を確認できませんが

シリウスに導入した場合は　ＨＴＭＬ　ｈｅａｄ内に置くｓｃｒｉｐｔ記載を編集します

比較範囲の割合の変化指定と表される数値

上記に置くsampleページでグラフにマウスを当てると％を示す数値が　
二つ比較できるよう表示されますことをご確認ください

sampleはデフォルトで指定が表示されますがグラフのラインは、数値を
改行指定するに従い変化します

本家解説サイト参照　
http://www.chartjs.org/docs/

原本記載より、数値を変更する上下二つのメモリ

グラフにより、上メモリは一番左　下メモリは　上メモリと比較されるメモリと
解釈してください

var barChartData = {
labels : ["January","February","March","April","May","June","July"],
ここは上メモリ
　　　　　　　　　　datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",

以下の赤行を改行します

data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},

{
下メモリ
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
highlightFill : "rgba(151,187,205,0.75)",
highlightStroke : "rgba(151,187,205,1)",

以下の赤行を改行します
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]

}

上の改行欄を削除して以下記述に書き換えます
上記改行箇所はデフォルトで梱包内の別スクリプトを読み込む記載ですので
削除して数値を加えれば　改行後の数値とグラフ割合に変化します

グラフは2つの比較となるのですが　上下の記述の区別はありません
行が極端に少なくなりますが　全然問題ありません

数値は　左から　グラフも左からに表されます

上
data: [65, 59, 80, 81, 56, 55, 40]

下
data: [28, 48, 40, 19, 86, 27, 90]

改行例

var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]　// 比較指定数値
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]//比較指定数値
}
]
};

ここまでの手順を踏めばグラフをコンテンツに合わせて表示は出来るかと？
理解しますが、オプションを組み入れて変化させたい場合は
docsfファイルを参照ください

または本家サイトで....

オプションを参照

var option = {
//Boolean - 縦軸のライン位置の上書きの許可
scaleOverride : true,
//** ↑がtrueの場合 *
//Number - ライン位置の間隔
scaleSteps : 6,
//Number - ライン位置区切りの間隔
scaleStepWidth : 10,
//Number - ライン位置の最小値
scaleStartValue : 100,
//String - ライン位置の線の色
scaleLineColor : "rgba(0,0,0,.1)",
//Number - ライン位置の幅
scaleLineWidth : 10,
//Boolean - メモリを表示するかどうか
scaleShowLabels : true,
//String - メモリのフォント
scaleFontFamily : "'Arial'",
//Number - メモリのフォントサイズ
scaleFontSize : 10,
//String - メモリのフォントスタイル bold→太字
scaleFontStyle : "normal",
//String - メモリのフォント
scaleFontColor : "#333",
///Boolean - チャートの背景にグリッドを描画するか
scaleShowGridLines : true,
//String - チャート背景のグリッド色
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - チャート背景のグリッドの太さ
scaleGridLineWidth : 1,
//Boolean - ラインを曲線にするかどうか。falseで折れ線表示にする
bezierCurve : true,
//Boolean - 点を描画するか
pointDot : true,
//Number - 点の大きさ
pointDotRadius : 3,
//Number - 点の周りの大きさ
pointDotStrokeWidth : 1,
//Number - ラインの太さ
datasetStrokeWidth : 2,
//Boolean - アニメーションの有無
animation : true,
//Number - アニメーションの早さ(大きいほど遅い)
animationSteps : 60,
//Function - アニメーション終了時の処理
onAnimationComplete : null
}
//グラフを描画する
var myNewChart = new Chart(ctx).Line(data,option);
//optionを指定せずとも描画可能
//var myNewChart = new Chart(ctx).Line(data);

オプションを参照とは、怠けているのではありませんが
chart.ｊｓの導入に疲れ果てまして　頭が動いてくれません
このページのコンテンツは時間を置いてから再度進めたいと想います

急ぐ方は　、本家サイトおよび他サイトを参考にしてください

アイ？．．．すみません

chart.ｊｓグラフチャート表示例とカスタマイズ
 シリウスサイトにグラフチャートを表示させよう
 シリウスカスタマイズ

chart.ｊｓグラフチャート表示例とカスタマイズ関連解説

シリウスに超簡単円グラフを導入: SIRIUS　シリウスサイトに超簡単に導入できる円グラフのご案内です　ややのカスタマイズで速攻掲載可能　可愛いと評判のオールマイティ円グラフ
横範囲指定　棒グラフ: SIRIUS、シリウスサイトにＨＴＭＬ記述で横長表示の棒グラフで範囲を指定するコードのご案内です
Google Chart ＡＰ1利用のグラフ表示: SIRIUS　シリウスサイトにGoogle Chart AP1で発行されるグラフチャートスクリプトコードを張り付ければ各種のコンテンツに適合する比較グラフの表示が可能です
chart.ｊｓでグラフチャートを表示する: SIRIUS　シリウスサイトに評価の高いchart.ｊｓでグラフチャートを表示する手順をご案内します
シリウスに単独でチャートコンテンツページを組み込む: シリウスでは構造上　トップページ以外ではチャートscriptが表示されない場合もあります　そんな場合は　独自にhtmlサイトをサーバーに置いて読み込みます
グラフのデモページへの作り方　スクリプト全般に応用可能: シリウスサイトでグラフを使用してウェブ解説などする際はデモページへ参照としてリンク誘導しては如何でしょう？　今回はスクリプト全般に応用可能なご案内で進めています

chart.ｊｓグラフチャート表示例および比較範囲の編集方法

スポンサー広告

レスポンシブオンリー