みんなに優しく、解りやすくをモットーに開設しています。 以下のルールを守りみんなで助け合いましょう。
1.ファイルメーカーで解らない事があればここで質問して下さい。 何方でも、ご質問・ご回答お願いします。 （優しく回答しましょう）
You are not logged in.
Pages: 1
お世話になります。
環境FM19 WIN11
ChartJSを使い便利にグラフを作成しているのですが、印刷すると表示されなかったり値が変になったりします。
何か回避・解決方法などあるのでしょうか？
ご教授お願いします。
Offline
印刷時にWebビューアがリロードされるので、リロードされた状態で正しく表示されるようなコードにすればいいと思いますが
印刷するのは1つのグラフですか？
そういえば、Edgeベースになって印刷が低解像度になる問題は直ったのかな...
お世話になります。
現在、印刷予定は１つのグラフですが複数グラフも印刷したいと思っています。
Offline
>ChartJSを使い便利にグラフを作成している
とありますが、私が現在使っているものがChart.jsなので参考迄
web ビューアのアドレスに直接chartを描くhtmlを記述したり計算式で他のフィールド等から呼び込んだ場合は、web ビューアを含むFMの印刷では印刷データは描画の途中迄でです。データ処理の関係と思いますが素人の私には分かりかねます。
さらにいえば「web ビューアの設定」などで描画した場合はchartは全く描画されません。
chartだけ印刷するのであれば右クリックメニューで印刷を選べば済む話ですが,他の部分を含めてとなった場合に取りあえずchartをimage画像にして別途オブジェクトフィールドを使ったレイアウトで印刷することは出来ますが直接となると・・・
ありがとうございます。
やはり、Web Viewer内で表示させたChartJSのグラフ印刷は癖がありますね。
HTMLで直接表示したものは綺麗に印刷出来るのでなんとか出来ない物かと思ってます。
情報ありがとうございます。
Offline
FileMaker Pro 19.3.1 以降であれば、
GetLayoutObjectAttribute ( "Web View名" ; "content" ) でレンダリング後のソースが取得出来るので、印刷時はそれを使えば良さそうですが試してはいません。
JavaScriptが分かるなら、以下で画像化するとか。
GitHub - tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas
https://github.com/tsayen/dom-to-image
Offline
あまり参考にならないと思いますが
複数グラフを一つのcanvasに纏め下記のjs文を使いスクリプトでイメージ画像をオブジェクトフィールドに保存する方法です。
"<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>multiグラフ</title>
</head>
<body>
<div class="row" style="width: 100%;" >
<div class="chart1" style="float: left;" >
<canvas id="myChart1" width="300" height="250"></canvas></div>
<div class="chart2" style="float: right;">
<canvas id="myChart2" width="300" height="250"></canvas></div>
<div class="chart3" style="bottom: 0;float: left;">
<canvas id="myChart3" width="300" height="250"></canvas></div>
<div class="chart4" style="bottom: 0;float: right;">
<canvas id="myChart4" width="300" height="250"></canvas></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://unpkg.com/chartjs-plugin-colorschemes"></script>
<script>
Chart.defaults.global.defaultFontColor = 'black'; //デフォルトのフォントカラーを変更
function displayChart(canvasId, chartType, datasets, options) {
var ctx = document.getElementById(canvasId);
var myPieChart = new Chart(ctx, {
type: chartType,
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
// Ｘ軸のラベル
datasets: datasets
},
options: {
plugins: {
colorschemes: {
scheme: options.colorscheme
}
},
responsive: false,
// canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定
title: {
display: options.title.length > 0,
// タイトルがあれば表示
text: options.title
},
legend: {
// 凡例
display: true,
// 表示の有無
position: options.legendPosition,
// 表示位置
labels: {
usePointStyle: options.usePointStyle // 円の凡例スタイルを使うか
}
}
}
});
}
var datasets = [{
label: '仙台',
data: [320000, 590000, 400000, 420000, 380000, 250000, 420000]
}, {
label: '札幌',
data: [520000, 450000, 380000, 280000, 590000, 400000, 530000]
}, {
label: '渋谷',
data: [650000, 230000, 480000, 600000, 620000, 700000, 760000]
}];
displayChart('myChart1', 'bar', datasets, {
title: '',
colorscheme: 'office.Slice6',
usePointStyle: false,
legendPosition: 'top'
});
for (var i = 0; i < 3; i++) {
displayChart("myChart".concat(i + 2), 'pie', [datasets[i]], {
title: datasets[i].label,
colorscheme: 'brewer.DarkTwo7',
usePointStyle: true,
legendPosition: 'left'
});
}
function imageDownload() {
var chartWidth = 350;
var chartHeight = 242;
var imageType = "image/png"
var imageFileName = "chart.png";
var bufferCanvas = document.createElement("canvas")
bufferCanvas.width = chartWidth * 1.82;
bufferCanvas.height = chartHeight * 2.2;
bufferCanvas.style.display = "none";
document.body.appendChild(bufferCanvas);
var ctx = bufferCanvas.getContext("2d");
// 背景色を設定（しない場合は透過）
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, bufferCanvas.width, bufferCanvas.height);
// グラフを貼り付け
for (i = 1; i <= 4; i++) {
ctx.drawImage(
document.getElementById("myChart" + i),
i % 2 == 1 ? 0 : chartWidth,
i <= 2 ? 0 : chartHeight
);
}
var imageURL = bufferCanvas.toDataURL(imageType);
FileMaker.PerformScript("script02", imageURL);
}
</script>
</body>
</html>"script02・・・保存スクリプト
変数を設定 [ $jsParameters; 値:Get ( スクリプト引数 ) ]
フィールド設定 [ chart::image; Base64Decode (Substitute ( GetValue ( $jsParameters ; 1 ) ; "data:image/png;base64,"; "" );"グラフ.png" ) ]
今現在chart.jsのバージョンが4.2.1になっているが、今回のサンプルはカラースキームのプラグインが2.9.4迄しか使い方が分からないので古いままでごめんなさい。
イメージをフィールドにコピーするためのスクリプトを一つ忘れていた。自動保存でも手動でもこれがないといけなかった。
スクリプト一時停止/続行 [ 間隔（秒）: .001 ]
Web ビューアで JavaScript を実行 [ オブジェクト名: "viewer"; 関数名: "imageDownload" ]
qb_dp、koko009様、ありがとうございます。
JS文を使いスクリプトでイメージ画像をオブジェクトフィールドに保存する方法で印刷することが分かりました。
教えて頂いた内容を復習して運用しているファイルに落とし込みたいと思います。
ただ、FileMaker側でもっと簡単に実装出来るとうれしいです。
今後のFMバージョンアップに期待したいと思います。
Offline
Pages: 1
[ Generated in 0.006 seconds, 9 queries executed - Memory usage: 542.22 KiB (Peak: 563.13 KiB) ]