标签: vue-chartjs

vue我正在使用和的最新版本vue-chart.js。

我想自定义悬停在某个点时显示的工具提示。

问题

工具提示与默认工具提示相比没有变化

问题

如何自定义工具提示。最终，我希望能够单击工具提示中的链接来触发一个对话框，该对话框将显示从我的 vue 组件中包含的数据中获取的详细信息。

Vue.component('line-chart', {
  extends: VueChartJs.Line,
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 39, 10, 40, 39, 80, 40]

        }
      ]
    }, {
      tooltips: {
        custom: function(tooltipModel) {
                // Tooltip Element
                var tooltipEl = document.getElementById('chartjs-tooltip');

                // Create element on first render
                if (!tooltipEl) {
                    tooltipEl = document.createElement('div');
                    tooltipEl.id = 'chartjs-tooltip';
                    tooltipEl.innerHTML = "<table></table>"
                    document.body.appendChild(tooltipEl);
                }

                // …

我正在使用 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: [{ …

我正在使用 Vue-chartjs 并创建了两个 vue 组件，每个组件用于条形图和折线图。我的数据源是SharePoint。我可以看到我的图表，但问题是图表没有响应。它们被放大并相互叠置。

我将道具从父级传递到每个组件（包括选项），但没有用。

这是我的 vue 实例代码和条形图组件的摘录

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
    ChartConfig: {
      labels: [],
      datasets: [
        {
          data: [],
          backgroundColor: '#3498db',
          borderColor: 'rgba(136,136,136,0.5)',
          label: "2013"
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      title: {
        display: true,
        text: 'Chart.js Line Chart'
      },
      tooltips: {
        mode: 'index',
        intersect: false,
      },
      hover: {
        mode: 'nearest',
        intersect: true
      },
      scales: {
        xAxes: [{
          display: true,
          categoryPercentage: 0.5,
          scaleLabel: {
            display: true,
            labelString: 'Month'
          } …

我有一个 vue 组件，它实现了 vue-chartjs 的 Horizo​​ntalBar 组件，我将其渲染为 bootstrap-vue 表中的单元格。我的愿望是让图表保持固定的高度，但随着窗口的增大/缩小而水平缩放。

当页面首次加载时，图表播放得很好，但在调整大小以覆盖页面上的其他元素时，图表会不受控制地增长。

我怎样才能让他们做出正确的反应而不让他们去不该去的地方？我还想确保它们实际上占据了它们所在的表格单元格的范围，而不是奇怪地停止了几个像素。

这是我的相关组件代码：

<script>
import { HorizontalBar } from "vue-chartjs";
import Constants from "../../services/Constants";

export default {
  name: "ResponseGraph",
  extends: HorizontalBar,
  props: { /* some props */ },
  data: () => ({
    chartData: {},
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        xAxes: [{ stacked: true, display: false }],
        yAxes: [{ stacked: true, display: false }]
      },
      legend: {
        display: false
      },
      tooltips: {
        enabled: false
      }
    }
  }),
  mounted() { …

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)

我知道有一些Legend 生成器，但我不确定如何将它与 VueJS 一起使用 - 因为我使用 VueJS 作为框架

这就是我的传奇现在的样子 - …

我想将数据从父级传递到孙级（即图表）并具有反应性，因此我使用道具。

这是家长

下面的“kalkulator-data”组件已工作，用于将数据添加到Parent。

<template>
    <div class="container">
        <div class="row">

                <kalkulator-data 
                    :saldoAwal="saldoAwal" 
                    :saldoTerpakai="saldoTerpakai" 
                    :saldoAkhir="saldoAkhir"
                    :dataKategori="dataKategori"
                    :dataPengeluaran="dataPengeluaran"

                    @inputSaldo="saldoAwal = $event"
                    @inputPengeluaran="dataPengeluaran.push($event)">

                </kalkulator-data>

                <kalkulator-chart
                    :chartData="chartData"
                    :chartOptions="chartOptions">    

                </kalkulator-chart>

        </div>
    </div>
</template>

<script>
    import Chart from './Bagian/Chart.vue';
    import Data from './Bagian/Data.vue';

    export default {
        data(){
            return {
                saldoAwal : 0,
                dataPengeluaran : [{ kategori : 'Abi', nominal : 12}, { kategori : 'Ilham', nominal : 13}],
                dataKategori : [
                    'Makan dan Minum',
                    'Berbelanja',
                    'Perlengkapan Rumah',
                    'Transportasi',
                    'Kendaraan',
                    'Gaya Hidup dan Hiburan',
                    'Komunikasi',
                    'Pengeluaran …

我想知道是否可以在chartjs3中显示图表数据。我知道 Chartjs2 有这样的东西，但我不知道在 3 中是否可能

我正在尝试为 ChartJS 配置和使用 datalabels 插件，但没有成功。我使用 npm 作为项目管理工具，因此使用 ' 添加了插件

npm install --save Chartjs-plugin-datalabels

将其导入到我的组件中

import ChartJSPluginDatalabels from "chartjs-plugin-datalabels";

添加到组件依赖中

components: {
    ChartJSPluginDatalabels,
    ... }

添加到选项中

  data: () => ({
    options: {
      responsive: true,
      maintainAspectRatio: false,
      tooltips:{
          enabled : true
      },
      plugins: {
        datalabels: {
            formatter: (value, ctx) => {
                
                let sum = 0;
                let dataArr = ctx.chart.data.datasets[0].data;
                dataArr.map(data => {
                    sum += data;
                });
                let percentage = (value*100 / sum).toFixed(2)+"%";
                return percentage;
            },
            color: '#fff',
        }
     }   
    }

与 Chartjs …

我们需要将自定义插件附加到 vue-chart。请指导我们如何实施

import { Line, mixins } from 'vue-chartjs'
export default {
    namespaced: true,
    extends: Line,
    props: ['chartData', 'options'],
    mounted() {
        this.renderChart(this.chartData, this.chartData.options)
    }
}

这就是我们使用Vue-chart折线图的方式。如何在此处附加插件

https://blog.larapulse.com/javascript/creating-chart-js-plugins 我们想尝试一下。但由于我们使用的是 vue-chart，它内部使用chart.js. 需要一些帮助来附加插件。请指导我们

我想为图表中的一个特定列应用一些背景颜色

通常我应该能够通过将属性添加到数据集来添加填充。但我无法让它工作，我也无法找到任何类似的信息。也许缺少一个插件？

const chartData = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                radius: 0,
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgb(75, 192, 192)',
                tension: 0.1,
                hoverOffset: 4,
                data: [65, 59, 80, 81, 56, 55, 40],
                fill: true
            }]
        }

我的 CartJS 注册如下所示：

import {
    Chart as ChartJS,
    Title,
    Tooltip,
    LineElement,
    LinearScale,
    PointElement,
    CategoryScale,
    Plugin
} from 'chart.js'
import { useConstructionRiskStore } from '../../core/stores/constructionRiskStore'

ChartJS.register(
    Title,
    Tooltip,
    LineElement,
    LinearScale,
    PointElement,
    CategoryScale
)

这可能只是一些愚蠢的事情......我知道。