标签: vue-chartjs

我正在使用Vue.js和Chart.js绘制一些图表.每次调用该函数时generateChart(),图表都不会自动更新.当我检查数据时generateChart(),它们是正确的,但图表并不代表那些.

有趣的事实:当我调整窗口大小时,图表正在更新.

• 我正在做什么有什么问题？
• 每次打电话时如何更新图表object？

我觉得这将是一些与相关的array和generateChart()变化的检测警告,但我不知道该怎么做.

https://codepen.io/anon/pen/bWRVKB?editors=1010

<el-dialog title="Chart" v-model="showGeneratedChart">
     <line-chart :chartData="dataChart"></line-chart>
</el-dialog>

 export default{
    data (){
        const self = this;
        return {
         dataChart : {
                labels : [],
                datasets: [{
                        label: 'label',
                        backgroundColor: '#FC2525',
                        data: [0, 1, 2, 3, 4],
                    }]
        }
    }
}


 generateChart() { 
     this.dataChart['labels'] = [];
     this.dataChart['datasets'] = [];

     ... compute datasets and formattedLabels

     this.dataChart['labels'] = formattedLabels;
     this.dataChart['datasets'] = datasets;
 }

LineChart.js

import { Line, mixins } …

我需要在我的bar图表上添加一个简单的点/垂直线,它具有动态X值,0表示Y值.预览我需要的东西(红点):

绿色值是动态的.

预览我目前的状态:

其中3.30应该是点的X坐标 - [3.30,0].

我使用Vue的图表的图表和我尝试做创建一个混合的一个与bar和scatter,但scatter需要type: 'linear'为它的xAxis不适合我的需要的bar图表.

所以我尝试使用chartjs-plugin-annotation,它的box类型接受"坐标"但这里的问题是该X值必须是X轴(labels对象)上的固定值.如果我放置X轴[3,0]它将起作用,但如果有一个十进制数,如[3.5,0],它将无法工作.

  // data
  options: {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 1,
          stepSize: 0.1
        }
      }]
    }
  }

  // computed 
  labels: [1, 2, 3, 4, 5, 6], // fixed …

我用 chart.js 创建了一个简单的响应式 HTML + JS 图表，效果很好。我决定在 Vue CLI 中执行此操作，因此尝试将其切换到 vue-chartjs，但相同的图表总是呈现比我的窗口高约 33%，因此呈现垂直滚动条（宽度很好）。我用一个简单的示例图重新创建了这个问题，我用它来渲染：

import {Line} from 'vue-chartjs'
export default {
  extends: Line,
  mounted () {
    this.renderChart(data, options)
  } 
} 

请注意data是微不足道的options是{}。

如果我在我的 Vue 组件中使用 chart.js，而不是 vue-chartjs，那么它就可以正常工作。即我只是从我的组件中删除上述代码并将其更改为以下代码，然后它就可以正常呈现，就像我的示例 HTML + chart.js 版本一样。

import Chart from 'chart.js'
function mount(el) {
    return new Chart(
        document.getElementById(el).getContext('2d'), {
        type: 'line',
        data: data,
        options: options,
    })
}

export default {
    template: '<canvas id="chart"></canvas>',
    mounted () {
        self.chart = mount('chart')
    }
}

我使用的是默认responsive: …

我正在使用 Vue.js 3，但由于此错误，我无法使用 Vue-chartjs 制作图表：

Uncaught TypeError: createElement is not a function
    at Proxy.render (BaseCharts.js?86fc:8)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:673)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4475)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4458)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4416)
    at processComponent (runtime-core.esm-bundler.js?5c40:4376)
    at patch (runtime-core.esm-bundler.js?5c40:3991)
    at mountChildren (runtime-core.esm-bundler.js?5c40:4180)

这是显示我的图表的 App.vue：

<template>
  <line-chart />
</template>

<script>
import LineChart from "./components/Chart";
export default {

  name: "App",
  components: {
    LineChart
  }
};
</script>

这是呈现折线图的 Chart.vue：

<script>
import { Line } from "vue-chartjs";
export default {
  extends: Line,
  data: () …

我正在尝试使用反应数据mixin for vue-chartjs

用于设置初始数据的挂载函数正常工作,我可以使用API​​响应正确查看图表:

fetchSessionTrends() {
    axios.get(endpoint)
    .then(({data}) => {
        this.sessions = data.map(session => session.sessions);
        this.sessionLabels = data.map(label => label.date);
        this.loaded = true;
    });
},

数据:

data() {
    return {
       endpoint: 'public/api/sessions',
       sessions: [],
       sessionLabels: [],
       loaded: false,
       daysFilter: 14
    };
},

我显示带有文本字段的图表以提供反应部分 - 期望是它再次调用端点并接收新响应

<div class="col-md-2 session-filter">
    <div class="input-group">
    <input type="text" class="form-control" placeholder="days..." v-model="daysFilter">
    <span class="input-group-btn">
      <button class="btn btn-secondary" type="button" @click="refreshSessions">Go</button>
    </span>
    </div>
</div>
<line-chart v-if="loaded" :chart-data="sessions" :chart-labels="sessionLabels"></line-chart>

然而,要测试反应部分,现在我只是直接更改数据数组以查看它是如何工作的:

refreshSessions() {          
   this.sessions = [1, 2, 3];
   this.sessionlabels = ["june", …

我有一个关于 vue-chartjs 的问题。我需要在 jsfiddle 中实现这样的结果：http : //jsfiddle.net/mbhavfwm/
这是我的 vuejs 组件的代码（图表数据由 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: [
              {
                gridLines: {
                  display: false
                },
                type: "time",
                time: {
                  format: "HH:mm:ss",
                  displayFormats: {
                    'millisecond': 'h:mm a',
                    'second': …

有一些教程（例如https://medium.com/geekculture/chart-js-in-nuxt-js-how-to-implement-c255a2657b02）展示了如何将 Chart.js 与早期版本的 Nuxt 集成3 甚至 Nuxt 2。但它们由于各种原因不起作用。本教程例如 https://dev.to/anggakswr/chart-js-in-nuxt-js-4hjf 会导致 500 错误：

Cannot read properties of undefined (reading 'component')

at ./plugins/charts.js:6:31
at async ViteNodeRunner.directRequest (./node_modules/vite- 
node/dist/client.mjs:331:5)

此外，还有不同的方法：一个教程/示例使用“Nuxt 插件”方式，另一种使用“Nuxt 组件”方式......

我尝试了基于此处文档的插件方式：https ://nuxt.com/docs/guide/directory-struct/plugins#vue-plugins ：

// plugins/charts.js

import { Bar } from "vue-chartjs"

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Bar)
})

但一旦我运行npm run dev，我就会收到此警告：

[Vue warn]：插件必须是一个函数或具有“安装”函数的对象。

然后：

[Vue warn]: Failed to resolve component: BarChart
If this is a native custom element, make sure to exclude it from component resolution …

所以我收到这个错误

[Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，值都会被覆盖。相反，根据道具的值使用数据或计算属性。道具正在发生变化：“chartData”（在 中找到）

现在这似乎是一个常见的错误，但我不知道在这种情况下如何解决它

我在 Vue-chartjs 中使用 Vue，我得到以下结果

bar_chart.vue

<script>
  import { Bar, mixins } from 'vue-chartjs'

  export default Bar.extend({
    name:"bar_chart",
    mixins: [mixins.reactiveProp],
    props: ["width","height","options"],
    mounted () {

      this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false});
    }
  })
</script>

module_content.vue

<template>
  <div id="module_content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6 bar_chart_test">
          <bar_chart
            :chartData="DataSet"
            :width="400" 
            :height="200">
          </bar_chart>
          <button v-on:click="getBarDate">Hey there!</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bar_chart from 'components/controls/bar_chart.vue'

export default {
  name: 'module_content',
  components: {
    bar_chart
  },
  data: function () { …

我想给我的图表一个渐变背景颜色，但我无法访问画布上下文，因为我的图表在我编写的包装器组件中呈现。

我想要达到的目标：

我的实际包装看起来像这样：

<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);
  }
};
</script>

我将我的包装器用于不同的折线图，并让它的父级传递相关数据 - 有时每页多次使用包装器组件。

所有配置（选项、标签等）都在使用包装器的父组件中完成。

有没有办法将画布上下文从包装器获取到使用包装器的父组件？

要创建渐变，您需要这样的东西：

this.gradient = this.$refs.canvas
  .getContext("2d")
  .createLinearGradient(0, 0, 0, 450);

this.gradient.addColorStop(0, "rgba(255, 0,0, 0.5)");
this.gradient.addColorStop(0.5, "rgba(255, 0, 0, 0.25)");
this.gradient.addColorStop(1, "rgba(255, 0, 0, 0)");

..butthis.$refs.canvas在父组件中未定义，这会阻止我获取上下文，因此我无法创建渐变。

我正在使用 vue-chartjs 在网络应用程序上渲染图表。我知道如果您使用原始库，您可以打印图表。但是我不知道如何使用 vue 版本的库来做到这一点。

我的图表变量位于外部charts.js 文件中

import {Bar, mixins } from 'vue-chartjs'
Chart.defaults.global
let chartOptions = Chart.defaults.global;   
const { reactiveProp } = mixins
export default {
   extends: Bar,
   mixins: [reactiveProp],
   props: ['options'],

   mounted () {
    let that = this;
    that.chartOptions = {
      scales: {
        yAxes: [{
            ticks: {
                suggestedMin: 0,  
                fontFamily: "'Overpass_Mono', 'Monaco', monospace",
                fontColor: "rgba(254, 255, 248, 0.5)"
            },
            gridLines: {
                color: 'rgba(255, 80, 248, 0.08)',
                zeroLineColor: 'rgb(168, 119, 181)',
                 zeroLineWidth: 2
            },
        }],
        xAxes: [{ …