下記のパラメータを追加する
１．hanreiPosition
- side：凡例をグラフの右に表示
- top：凡例をグラフの上に表示
２．hanreiPosition
- 凡例のマーカーと文字のスペースサイズ（例：”5″）
ccchart.jsの凡例表示メソッドをカスタマイズ
// 凡例表示（上）
drawHanreiTop: function () {
//凡例出力
this.ctx.save();
var len = this.hanreiNames.length;
var xOffset =
this.util.setConfigNum(this, 'hanreiXOffset', this.op.config.hanreiXOffset, this.gcf.hanreiXOffset, 14);
//var yOffset =
// this.op.config.hanreiYOffset || this.gcf.hanreiYOffset || 40;
var yOffset =
this.util.setConfigNum(this, 'hanreiYOffset', this.op.config.hanreiYOffset, this.gcf.hanreiYOffset, 20);
//addメソッド用最初の凡例と次の凡例の隙間
var hanreisYSpace =
this.util.setConfigNum(this, 'hanreisYSpace', this.op.config.hanreisYSpace, this.gcf.hanreisYSpace, 12);
if(!this._baseY)this._baseY = 0;
var radius =
this.util.setConfigNum(this, 'hanreiRadius', this.op.config.hanreiRadius, this.gcf.hanreiRadius, ((len < 10)?8:(len < 20)?5:3));
var offradius = 0;
if(this.type==='line' || this.type==='linemulti' ||this.type==='bezi' ||this.type==='bezi2'){
offradius = radius/5;
radius = radius - offradius;
}
var lineHeight =
this.op.config.hanreiLineHeight || this.gcf.hanreiLineHeight || ((len < 10)?20:(len < 20)?14:8);
var fontsize = (len < 10)?12:(len < 20)?9:6;
var font =
this.op.config.hanreiFont || this.gcf.hanreiFont || "100 "+fontsize+"px 'Arial'";
let _colorSet = this.colorSet.slice(0,this.hanreiNames.length);
var hanreiOrder = this.op.config.hanreiOrder || this.gcf.hanreiOrder || "nomal";
if(hanreiOrder==='reverse'){
this.hanreiNames.reverse();
_colorSet.reverse();
}
var color =
this.op.config.hanreiColor || this.gcf.hanreiColor ||
this.textColor ||
this.textColors.all||
this.textColors.hanrei ||
"#ccc";
var align = this.op.config.hanreiAlign || this.gcf.hanreiAlign || "left";
var shdw = (this.shadows)?this.shadows.hanrei||this.shadows.all||['#222', 5, 5, 5]:'';
if(this._addsFlg > 0){
if(align === "left"){
xOffset = xOffset + 42;//本当は下記のように目盛りの文字サイズを計って修正する
} else {
xOffset = xOffset;//本当はcenterも同様に下記のように目盛りの文字サイズを計って修正する
}
}
var _space = 0;
if(this._addsFlg === 2){
_space = this._baseY + hanreisYSpace;
}
for(var i = 0; i < this.hanreiNames.length; i++){
// y座標は固定
var posy = lineHeight + yOffset + _space;
this.ctx.beginPath();
if(this.useShadow === 'yes')this.drawShadow(shdw[0],shdw[1],shdw[2],shdw[3]);
this.ctx.fillStyle = _colorSet[i];
this.ctx.strokeStyle = _colorSet[i];
var x, y = this.chartTop - posy;
var fontSize = this.ctx.font.split('px')[0]||12;
var _flen = this.hanreiNames[i];
var fontWidth = (_flen)?((this.hanreiNames[i].length||0) * fontSize):0
// x座標を凡例の幅分、左にずらす
var xMarker = 0;
var posx = (fontWidth * i) + (radius * 4 * i) + xOffset + _space;
if(align === "left"){
x = this.chartRight + xOffset + posx;
xMarker = x + this.hanreiMarkerSpace;
} if(align === "right"){
x = this.chartRight + this.paddingRight - xOffset + posx;
xMarker = x - this.hanreiMarkerSpace;
} if(align === "center"){
x = this.chartRight + ( this.paddingRight /2 - fontWidth/2) + xOffset + posx;
xMarker = x;
}
// 破線を描画する
if (this.type === 'linemulti') {
this.ctx.setLineDash(this.dash[i]);
}
if(this.hanreiMarkerStyle === 'arc')this._markerArc(this, xMarker, y, radius, offradius);
else if(this.hanreiMarkerStyle === 'multi')this._markerMulti(this, xMarker, y, radius, offradius);
else this._markerRect(this, xMarker, y, radius, offradius);
this.ctx.font = font;
this.ctx.textAlign = align || "left";
this.ctx.fillStyle = color;
this.ctx.fillText(
this.hanreiNames[i],
(align === "left")?
(x + radius * 2 ):
(align === "right")?
( x - ( radius * 2)):
(align === "center")?
( x +( fontWidth/2) + (radius * 2) ):
( x +( fontWidth/2) + (radius * 2) ) ,
this.chartTop - posy
);
this.ctx.closePath();
}
this.ctx.restore();
len=xOffset=yOffset=hanreisYSpace=radius=offradius=lineHeight=fontsize=font=color=align=shdw=_space=i=posy=x=y=fontSize=_flen=fontWidth=null;
return this;
},呼び出し部分
draw: function (op) {
・
・
・
if (this.onlyChart === 'no' && this.useHanrei !== 'no') {
// 凡例の種類
if (this.hanreiPosition === 'top') {
this.drawHanreiTop();
} else {
this.drawHanrei();
}
}
パラメータ受け取り 初期設定
preProcessing: function (op, callback) {
・
・
・
//チャートのみを表示(タイトル,サブタイトル,X軸Y軸目盛値無し) no|yes
this.onlyChart = op.config.onlyChart || this.gcf.onlyChart || "no";
//凡例の位置(top,side)
this.hanreiPosition = op.config.hanreiPosition || this.gcf.hanreiPosition || "side";
//凡例のマーカーと文字のスペース
this.hanreiMarkerSpace = this.util.setConfigNum(this, 'hanreiMarkerSpace', this.op.config.hanreiMarkerSpace, this.gcf.hanreiMarkerSpace, 0);
呼び出し部分の設定（html、javascript）
<html>
<head>
<script src="<c:url value="/resources/js/ccchart_customize.js"/>"></script>
<script type="text/javascript">
$( function() {
var chartdata100 = {
"config": {
"title" : "月売上グラフ",
"subTitle" : "2018年",
"type" : "bar",
"useShadow" : "no",
"bg" : "#ffffff",
"yColor" : "#ffffff",
"colorSet" : ["#a9a9a9", "#006400" ],
"unit" : "円",
"hanreiMarkerStyle" : "rect",
"hanreiAlign" : "left",
"hanreiMarkerStyle" : "rect",
"hanreiXOffset" : "-60",
"hanreiYOffset" : "2",
"hanreiPosition" : "top", // side：凡例をグラフの右に表示、top：凡例をグラフの上に表示
"hanreiMarkerSpace" : "5" // 凡例のマーカーと文字のスペース
},
"data": [
["","1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
["昨年度",20,45,12,20,80,50,72,63,30,52,32,50],
["本年度",30,23,56,40,42,68,76,90,75,20,57,40]
]
};
ccchart.init("hoge1", chartdata100)
} );
</script>
</head>
<body>
<h2>入力画面</h2>
<form:form modelAttribute="echoForm" action="${actionUrl}">
<div class="nameData">
<p>月別棒グラフ</p>
</div>
<canvas id="hoge1"></canvas>
</form:form>
</body>
</html>