- データの背景色にグラデーションをかける
- データごとの幅の大きさを変更し、一部データが強調して見えるようにしたい。
前提
vue-chart.jを使って、ドーナッツグラフを作っています。
背景色をグラデーションを使って表示し、一部のデータが強調して見えるように
幅のサイズを変更して表示できるようにしたいです。
イメージとしては添付画像をつけているので、そちらに沿うように作れればと思っています。
お忙しいところ申し訳ないですが、協力お願いいたします。
現在の状態
完成イメージ：
発生している問題・エラーメッセージ
エラー等は発生していません。
該当のソースコード
App.vue
1<template> 2 <Charts /> 3</template> 4 5<script> 6import Charts from '/Users/********/Desktop/test/sample_project/src/components/sampleChart.vue' 7 8export default { 9 name: 'App', 10 components: { 11 Charts 12 } 13} 14</script> 15 16<style> 17#app { 18 font-family: Avenir, Helvetica, Arial, sans-serif; 19 -webkit-font-smoothing: antialiased; 20 -moz-osx-font-smoothing: grayscale; 21 text-align: center; 22 color: #2c3e50; 23 margin-top: 60px; 24} 25</style> 26
sampleChart.vue
12<template> 3 <html> 4 <Doughnut :data=getdoughnutData :options=getdoughnutOption :plugins=getdoughnutPlugin /> 5 </html> 6</template> 7<style> 8</style> 9<script lang="js"> 10import { 11 Chart as ChartJS, 12 Title, 13 Tooltip, 14 Legend, 15 BarElement, 16 CategoryScale, 17 ArcElement, 18 LinearScale 19} from 'chart.js' 20import { Doughnut } from 'vue-chartjs' 21import * as chartConfig from '/Users/kuroouji/Desktop/test/sample_project/src/sample_chart.js' 22 23ChartJS.register(CategoryScale, LinearScale, BarElement, ArcElement, Title, Tooltip, Legend) 24 25export default { 26 name: 'App', 27 components: { 28 Doughnut 29 }, 30 computed: { 31 getdoughnutData() { 32 return chartConfig["data"] 33 }, 34 getdoughnutOption() { 35 return chartConfig["options"] 36 }, 37 getdoughnutPlugin() { 38 return [chartConfig["ratioText"]] 39 } 40 } 41} 42</script>
sample_chart.js
1export const data = { 2 labels: ["sold", "unsold"], 3 datasets: [{ 4 data: [60, 40] 5 }] 6} 7 8export const options = { 9 responsive: true, 10 maintainAspectRatio: false, 11 datasets: { 12 doughnut: { 13 cutout: "75%" 14 } 15 }, 16 plugins: { 17 legend: { 18 display: false 19 } 20 } 21} 22 23export const ratioText = { 24 id: 'ratio-text', 25 beforeDraw (chart) { 26 let progressOutput = changeData("00") 27 const { ctx, chartArea: { top, width, height } } = chart 28 ctx.save() 29 //チャート描画部分の中央を指定 30 ctx.fillRect(width / 2, top + (height / 2), 0, 0) 31 //フォントのスタイル指定 32 ctx.font = 'bold 15px Roboto' 33 ctx.fillStyle = '#b2b2b1' 34 ctx.textAlign = 'center' 35 ctx.textBaseline = 'middle' 36 const grad = ctx.createLinearGradient(0, 0, width, 0); 37 grad.addColorStop(0, "#00d9d0"); 38 grad.addColorStop(0.9, "#00ada4"); 39 chart["data"]["datasets"][0]["backgroundColor"] = [grad, "#cccccc"] 40 //80%という文字列をドーナツチャートの中央部に描画します 41 ctx.fillText('売上見込み', width / 2, top + (height / 2.6)) 42 ctx.font = "bold 30px Roboto" 43 ctx.fontStyle = "#666666" 44 ctx.fillText(progressOutput, width / 2.1, top + (height / 1.8)) 45 } 46 } 47 48function changeData(data) { 49 let progress = data; 50 return progress; 51} 52
試したこと
現在グラデーションに関しては、sample_chart.jsのcreateLinearGradient
を使って擬似的に実現できている状態ではありますが、ページのサイズを変更するなどして
再読み込みしなければ設定が変更されません。おそらく設定の仕方は合っているのですが
下記サイト(exportの順番について)などを見ていると、グラデーションの設定の読み込みが
間に合っていないのかなと思っています。多分vueファイルでrefやwatchを使うと値の変更を監視できるのかなと思っているのですが、js・Vueなどの知識が薄く、いまいち確証は得られていません。
幅の変更に関しては、下記公式サイトを見たところ記載がなかったので、
sample_chart.jsのbeforeDraw内で、ctxで設定の変更を行わなければならないと思うのですが、
vue-chart.jsがどのような仕組みでドーナッツグラフを作っているのか分からず
ctxのどの変数や関数を使えばいいのか分からないです。
そのため、jsについて詳しい方に意見をいただきたいと思っています。
[exportの順番について]
https://qiita.com/uhyo/items/6b111815ef5495f4e490
[chart.js公式]
※vue-chart.jsはchart.jsのラップのためvue-chart.js公式よりこちらの方が詳しい。
https://www.chartjs.org/docs/latest/
[chart.js プロパティ]
https://www.tohoho-web.com/ex/chartjs-params.html
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント