标签: vue-chartjs

有一个v-select组件，在更改时，我启动了fillData(selected)选定的位置v-model。而且我需要datacollection.datasets.label在更改时更新标签。我怎么做 ？

<script>
  import BarChart from './BarChart.js'
  import { mapGetters, mapActions } from "vuex";

  export default {
    name : "TestLegPerformance",
    components: {
      BarChart
    },
    data: () => ({   
      datacollection : {
          labels: ['Week-1','Week-2','Week-3'],
          datasets: [
            {
                label: '',
                backgroundColor: '#C58917',
                data: [40, 50, 20]
            }
          ]
        },
      selected: []

    }),
     computed: {
        ...mapGetters({
        planNames: "planNames"
        })
    },
    mounted () {
        this.getAllPlanNamesAction();
    },
    methods: {
      ...mapActions(["getAllPlanNamesAction"]), 
      fillData(selected){
          console.log(selected)
      },
    }
  }
</script>

我在我的项目上使用vue-chartjs。我想要实现的是添加与原始chartjs相同的选项，但在我的情况下不起作用。就像我删除/隐藏图表标题并删除y轴时一样，我相信这是chartjs v2。请参见下面的示例代码。

import { Line } from 'vue-chartjs'
export default Line.extend({
  mounted() {
    props: ['options'],
    this.renderChart({
      labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
      options: {
        legend: { //hides the legend
          display: false,
        },
        scales: { //hides the y axis
          yAxes: [{
            display: false
          }]
        }
      },
      datasets: [
        {
          lineTension: 0,
          borderWidth:1,
          borderColor: '#F2A727',
          pointBackgroundColor: '#F2A727',
          backgroundColor: 'transparent',
          data: [40, 20, 12, 39, 10, 30]
        }
      ]
    })
  }
}) …

我想知道如何删除折线图上多余的线条。我尝试设置drawborder为 false，但当然它只是删除轴上的所有行。我只是想摆脱不需要的指向 y 轴标签的垂直线，如下图带有红色标记的图像。

模板：

<d-chartrecord 
     :chart-data="datacollection" 
     v-bind:options="options"
     :height="200"
></d-chartrecord>

脚本：

export default {
    data () {
        return {
            datacollection: {},
            options: {
                responsive: true,
                legend: {
                  display: false,
                },
                scales: {
                    xAxes: [{
                        gridLines: {
                            display: true,
                            color: '#D7D7D7'
                        },
                        ticks: {
                            fontSize: 8,
                            beginAtZero: true
                        },
                        gridLines: {
                            display: true,
                        }
                    }],
                    yAxes: [{
                        display: true,
                        ticks: {
                            fontSize: 8,
                            beginAtZero: true,
                            stepSize: 50,
                            maxTicksLimit: 3
                        }
                    }],
                }
            },

        }
    },
    mounted () {
        this.putData() …

刚刚启动Vue.js和webpack.我正在尝试将vue-chartjs功能添加到我的项目中.我收到以下错误:

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)
at Object.defineProperty.value (..\..\fetch-data.vue:36)
at __webpack_require__ (bootstrap 7040a42393b737f78245:659)
at fn (bootstrap 7040a42393b737f78245:85)
at Object.<anonymous> (fetch-data.vue:7)

在我的package.json中

"dependencies": {
"axios": "^0.15.3",
"bootstrap-vue": "^1.0.0-beta.9",
"chart.js": "^2.7.1",
"core-js": "^2.4.1",
"font-awesome": "^4.6.3",
"vue": "^2.1.8",
"vue-chartjs": "^3.0.0",
"vue-router": "^2.1.1",
"vue-server-renderer": "^2.1.8",
"vue-template-compiler": "^2.1.8",
"vuex": "^2.1.1",
"vuex-router-sync": "^4.0.1"

},

我可以在node_modules文件夹(chart.js和vue-chartjs)中看到依赖项.

我抛出错误的.vue文件如下:

<script>
  //Importing Line class from the …

我正在尝试使用 vue-chartjs 制作 vue。我已经遵循了有关在更新 chartData 道具时重新呈现图表的所有相关文档。我的图表只会在我调整浏览器窗口大小后更新。

我的 parenttestchart.vue 文件：

<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="Select testthing"
                    variant="primary"
                    :options="testthingSelect.options"
                    :on-change="changetestthing"
                    class="m-md-2">                   
        </b-form-select>     
       <test-chart v-cloak :chart-data="datacollection" :chart-option="options"></test-chart>

    </div>
</template>

<script>

    import TestChart from './TestChart'

    export default {
        components: {
            TestChart 
        },
        data() {
            return {
                yAxisValues: [],
                datacollection: {},
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: false
                            },
                            gridLines: {
                                display: true
                            }
                        }],
                        xAxes: [{
                            type: …

我想在甜甜圈类型的图表中添加文本。
我在我的 vuejs 项目中使用这个插件：https : //github.com/apertureless/vue-chartjs
目前，它显示所有图表。 我只想拥有 Donut chart，但它显示了所有图表。

//*** Doughnut chat ***//

import { Doughnut } from "vue-chartjs";
import Chart from "chart.js";

export default {
extends: Doughnut,
  data: () => ({
  chartdata: {
  labels: ["Cambodia", "Thailand", "Vietnam", "Laos"],
  datasets: [
    {
      label: "Data One",
      backgroundColor: ["#a3c7c9", "#889d9e", "#647678", "f87979"],
      data: [91, 3, 3, 3]
      }
     ]
     },
  options: {
    legend: {
      display: false
    },
    responsive: true,
    maintainAspectRatio: false
  }
}),

mounted() {
  this.renderChart(this.chartdata, this.options);
  this.textCenter(880);
}, …

我使用 vue-chartjs 创建了一个 Vue.js 项目。我尝试重新安装该库，但仍然出现此错误：

error  in ./node_modules/chart.js/dist/chart.esm.js
Module parse failed: Unexpected token (6613:12)
You may need an appropriate loader to handle this file type.
|         if (intermediateIndex1 !== startIndex && intermediateIndex1 !== lastIndex) {
|           decimated.push({
|             ...data[intermediateIndex1],
|             x: avgX,
|           });
 @ ./node_modules/vue-chartjs/es/BaseCharts.js 1:0-29
 @ ./node_modules/vue-chartjs/es/index.js

应用程序.vue：

<template>
  <div id="app"></div>
</template>

<script>
import axios from "axios";
import moment from "moment";
import LineChart from "./components/LineChart";

export default {
  name: "App",
  components: {
    LineChart
  },
}

折线图.vue

<script>
import …

MyChart.vue

<template>
  <v-container>
    <v-card elevation="2">
      <v-card-title>AQI Comparison</v-card-title>
      <line-chart :chart-data="datacollection"></line-chart>
    </v-card>
  </v-container>
</template>

<script>
import LineChart from "./LineChart.js";

export default {
  name: "AQIChartComponent",
  components: {
    LineChart
  },
  data() {
    return {
      datacollection: {
        labels: [
          "week 1",
          "week 2",
          "week 3",
          "week 4",
          "week 5",
          "week 6",
          "week 7",
          "week 8",
          "week 9",
          "week 10",
        ],
        datasets: [
          {
            data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
            label: "Africa",
            borderColor: "#3e95cd",
            fill: false,
          },
          {
            data: [282, 350, …

我正在尝试绘制折线图。我有表单中的数据集

{
   line_1:{
      rt:[1,2,3,4,5,6],
      int:[2,3,4,5,6,7]
   },
   line_2:{
      rt:[1,2,3,4,5,6],
      int:[2,3,4,5,6,7]
   }
}

我尝试过的：

showChart(){
                this.renderChart({
                    labels: this.data.line_1.rt,
                    datasets: [
                        {
                            label: 'Data One',
                            backgroundColor: '#f87979',
                            data: his.data.line_1.intensity,
                        }
                    ]
                }, {responsive: true, maintainAspectRatio: false})
            }

现在我希望“rt”位于 x 轴，并且每条线的强度数组都不同。我可以画一条线，但不能画多条线。

这是我的图表组件的样子：

<script>
    let VueChartJs = require('vue-chartjs');

    export default VueChartJs.Line.extend({
        props:['data', 'status'],

        watch: {
            // whenever question changes, this function will run
            status: function (newStatus) {
                if(newStatus === true){
                    this.showChart();
                }
            }
        },

        methods :{
            showChart(){
                console.log(this.data);
                this.renderChart({
                    labels: this.data.groups[0]['peaks'][0].eic.rt,
                    datasets: [
                        {
                            label: …

我正在尝试将Chart.js与Vue.js一起使用，这就是我正在编译的结果，但是我在GUI上看不到任何显示。

这是我的文件DonutChart.vue：

<template>
 // NOT SURE IF SOMETHING SHOULD GO HERE
</template>

<script>
  import {Bar} from 'vue-chartjs'
  // import the component - chart you need

  export default Bar.extend({
    mounted () {
      // Overwriting base render method with actual data.
      this.renderChart({
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        datasets: [
          {
            label: 'News reports',
            backgroundColor: '#3c8dbc',
            data: [12, 20, 12, 18, 10, 6, 9, 32, 29, 19, 12, 11]
          }
        ]
      },)
    }
  });
</script> …

我使用VUE-chartjs作为一个包装chartjs。我有一个带有随机数据的简单折线图，但坚持如何设置要在图表的 y 轴上显示的固定值。目前我有 0-100 的随机数据。现在，我想要实现的只是显示0, 50, 100在 y 轴上，无论随机值是从0-100.

示例脚本

putData: function () {
    this.datacollection = {
        labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
        datasets: [{
            lineTension: 0,
            borderWidth: 1,
            borderColor: '#F2A727',
            pointBackgroundColor:[ '#fff', '#fff', '#fff', '#fff', '#fff', '#F2A727'],
            backgroundColor: 'transparent',
            data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
        }]
    }
},

getRandomInt: function () {
    return Math.floor(Math.random() * (95)) + 5
}

任何帮助将非常感激。

我在 Stackoverflow 上看到了很多解决方案，但没有人能解决我的问题。

我想更改 y 轴值的比例。

这将是

0 100 200 300

我的代码：

yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true,
                stepSize: 100,
                min: 0,
                max: 300
              }
            }]
          },
          axisLabel: {//},
        }],
        series: [{
          //
          lineStyle: {//},
          areaStyle: {
            normal: {
              //
          },
     itemStyle: {
       normal: {
         //
    }
  },
  data: [236, 0]
}]

我也改变了这一点。

axisTick: {
    show: false
}

我正在使用vue-chartjs. 我需要在图表中添加注释。我导入了一个注释插件

import chartjsPluginAnnotation from "chartjs-plugin-annotation"

然后在mounted上添加一个插件

this.addPlugin(chartjsPluginAnnotation)

另外，我在选项中添加了一个注释对象

plugins: {
  annotation: {
          drawTime: 'afterDraw',
            annotations: [
              {
                type: "line",
                id: 'BTV',
                mode: "horizontal",
                display: true,
                scaleID: "y-axis-0",
                borderColor: "red",
                value: 17000,
                borderDash: 4,
                label: {
                  content: 'aa',
                  enabled: true,
                  position: "top",
                  xAdjust: 15,
                  backgroundColor: '#4ecca3',
                  fontSize: 10,
                }
              }
          ]
  },
}

它适用于我找到的所有手册，但不适用于我的项目