vue-chartjs

问题 I have a vue component that implements vue-chartjs's HorizontalBar component that I render as a cell in a bootstrap-vue table. My desire is to have the chart maintain a fixed height but scale horizontally as the window grows/shrinks. The chart plays nicely enough when the page is first loaded but grows uncontrollably on re-size to cover other elements on the page. How do I make them properly responsive without them going where they shouldn't? I'd also like to make sure they actually take up

问题 I have a vue component that implements vue-chartjs's HorizontalBar component that I render as a cell in a bootstrap-vue table. My desire is to have the chart maintain a fixed height but scale horizontally as the window grows/shrinks. The chart plays nicely enough when the page is first loaded but grows uncontrollably on re-size to cover other elements on the page. How do I make them properly responsive without them going where they shouldn't? I'd also like to make sure they actually take up

问题 I have a vue component that implements vue-chartjs's HorizontalBar component that I render as a cell in a bootstrap-vue table. My desire is to have the chart maintain a fixed height but scale horizontally as the window grows/shrinks. The chart plays nicely enough when the page is first loaded but grows uncontrollably on re-size to cover other elements on the page. How do I make them properly responsive without them going where they shouldn't? I'd also like to make sure they actually take up

问题 I want to give my chart a gradient background color, but I can't access the canvas context as my chart gets rendered in a wrapper component I wrote. What I want to achieve: My actual wrapper rather looks like this: <script> import { Line, mixins } from "vue-chartjs"; const { reactiveProp } = mixins; export default { extends: Line, mixins: [reactiveProp], props: ["options"], components: {}, mounted() { // this.chartData is created in the mixin this.renderChart(this.chartData, this.options); }

问题 I have a question about vue-chartjs. I need to achieve a result like this one in jsfiddle: http://jsfiddle.net/mbhavfwm/ Here is my vuejs component's code (Chart data is sent by params). <script> import { Line, mixins } from 'vue-chartjs' import zoom from 'chartjs-plugin-zoom'; const { reactiveProp } = mixins; export default { extends: Line, mixins: [reactiveProp], data () { return { options: { scales: { yAxes: [{ ticks: { beginAtZero: true }, gridLines: { display: true } }], xAxes: [ {

问题 I am attempting to make a vue with vue-chartjs. I have followed all the associated documentation with regards to re-rendering the chart when the chartData prop is updated. My chart will only update after i resize the browser window. my parenttestchart.vue file: <template> <div> <h1>Chart datacollection update test</h1> <p>This component demonstrates fetching data from the server.</p> <p v-if="!datacollection"><em>Loading...</em></p> <b-form-select v-model="testthingSelect.selected" text=

问题 Just starting Vue.js and webpack. I'm trying to add vue-chartjs functionality to my project. I'm receiving the following error: Uncaught TypeError: _vueChartjs.Line.extend is not a function at Object.defineProperty.value (..\..\CommodityChart.vue:5) at __webpack_require__ (bootstrap 7040a42393b737f78245:659) at fn (bootstrap 7040a42393b737f78245:85) at Object.<anonymous> (CommodityChart.vue:3) at __webpack_require__ (bootstrap 7040a42393b737f78245:659) at fn (bootstrap 7040a42393b737f78245:85

问题 I need to create custom legend for my donut chart using ChartJS library. I have created donut with default legend provided by ChartJS but I need some modification. I would like to have value above the car name. Also I don't like sticky legend I want to have it separate from donut so I can change the style for fonts, boxes (next to the text "Audi" for example) I know there is some Legend generator but I'm not sure how to use it with VueJS - because I'm using VueJS as a framework This is how my

问题 I want to add shadow for the line in my chart. My code is like so import { Line } from 'vue-chartjs' import Chart from 'chart.js' let draw = Chart.controllers.line = Chart.controllers.line.extend({ draw: function() { let ctx = this.chart.chart.ctx; ctx.save(); ctx.shadowColor = 'red'; ctx.shadowBlur = 12; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 5; ctx.stroke(); draw.apply(this, arguments); ctx.restore(); } }); const BasicLineChart = { extends: Line, props: ['data', 'options'], mounted () {

问题 I am a student studying vue. I used Vue-chartjs to draw a graph, and I'd like to display the value on a pie graph. But I don't know what to do. Please help me... the current situation (image) : enter image description here My wish (image) : enter image description here Vue.component('pie-chart', { extends : VueChartJs.Pie, props: ['data', 'options'], mounted(){ this.renderPieChart(); }, computed: { attendanceData : function(){ return this.data } }, methods : { renderPieChart : function(){