Javascript 更新vue chartjs yaxis最大值，而不重新呈现整个vue chart js

我正在从事一个项目，在该项目中，我正在实现Vue Chartjs库中的一些图表。每次用户更改给定的过滤器时，我都需要Y轴最大值来更改。我从vue chartjs库导入现有条形图。代码中有一个javascript文件已经有了一些默认值，要设置额外的选项，我可以使用extraOptions对象作为道具，相应地对每个图表进行个性化设置。以下是默认组件：

import { Bar } from 'vue-chartjs'
import { hexToRGB } from "./utils";
import reactiveChartMixin from "./mixins/reactiveChart";

let defaultOptions = {
  tooltips: {
   tooltipFillColor: "rgba(0,0,0,0.5)",
   tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
   tooltipFontSize: 14,
   tooltipFontStyle: "normal",
   tooltipFontColor: "#fff",
   tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
   tooltipTitleFontSize: 14,
   tooltipTitleFontStyle: "bold",
   tooltipTitleFontColor: "#fff",
   tooltipYPadding: 6,
   tooltipXPadding: 6,
   tooltipCaretSize: 8,
   tooltipCornerRadius: 6,
   tooltipXOffset: 10,
},
legend: {
  display: false
},
scales: {
  yAxes: [{
    ticks: {
      fontColor: "#9f9f9f",
      fontStyle: "bold",
      beginAtZero: true,
      display: false,
      min: 0,
      max: 100
    },
  gridLines: {
    display: false,
    drawBorder: false,
  }
}],
xAxes: [{
  gridLines: {
    display: false,
    drawBorder: false,
   },
 }],
    }
   };
     export default {
        name: 'BarChart',
        extends: Bar,
        mixins: [reactiveChartMixin],
        props: {
        labels: {
        type: [Object, Array],
        description: 'Chart labels. This is overridden when `data` is provided'
    },
    datasets: {
      type: [Object, Array],
      description: 'Chart datasets. This is overridden when `data` is provided'
    },
    data: {
      type: [Object, Array],
      description: 'Chart.js chart data (overrides all default data)'
    },
    color: {
      type: String,
      description: 'Chart color. This is overridden when `data` is provided'
    },
    extraOptions: {
      type: Object,
      description: 'Chart.js options'
    },
    title: {
      type: String,
      description: 'Chart title'
    },
  },
  methods: {
    assignChartData() {
      let { gradientFill } = this.assignChartOptions(defaultOptions);
      let color = this.color || this.fallBackColor;
      return {
        labels: this.labels || [],
        datasets: this.datasets ? this.datasets : [{
          label: this.title || '',
          backgroundColor: gradientFill,
          borderColor: color,
          pointBorderColor: "#FFF",
          pointBackgroundColor: color,
          pointBorderWidth: 2,
          pointHoverRadius: 4,
          pointHoverBorderWidth: 1,
          pointRadius: 4,
          fill: true,
          borderWidth: 1,
          data: this.data || []
        }]
      }
    },
    assignChartOptions(initialConfig) {
      let color = this.color || this.fallBackColor;
      const ctx = document.getElementById(this.chartId).getContext('2d');
      const gradientFill = ctx.createLinearGradient(0, 170, 0, 50);
      gradientFill.addColorStop(0, "rgba(128, 182, 244, 0)");
      gradientFill.addColorStop(1, hexToRGB(color, 0.6));
      let extraOptions = this.extraOptions || {}
      return {
        ...initialConfig,
        ...extraOptions,
        gradientFill
      };
    }
  },
  mounted() {
    this.chartData = this.assignChartData({});
    this.options = this.assignChartOptions(defaultOptions);
    this.renderChart(this.chartData, this.options, this.extraOptions);
  }
}

我使用这个js文件在vue组件中导入条形图，如下所示。 每次表单的输入更改时，我都需要重新呈现图表。我使用

onInputChange（）

方法将布尔值

loaded

设置为false，并调用

loadedata（）

方法。 在

loadData（）

方法中，我发出一个axios请求，每次都能获得正确的数据。我还得到了Y轴的最大值

然后在响应中调用

updateChart（）

，以便更新数据和图表的最大值。然后，我再次将布尔值

loaded

设置为true，以便相应地呈现图表

这种方法的问题在于图表在一瞬间完全消失。在决定更改Y轴的最大值之前，我能够更新图表的数据，而无需使用v-if=“loaded”

我需要找到一个解决方案，让图表重新呈现，而不会从页面上完全消失。我知道一些人建议使用计算变量，但我不完全理解它应该如何工作。这是减去表单字段的组件

我想本质上我想要的是更新Y轴的最大值，而不必重新渲染整个图表

 <template>
      <div>
          <BarChart v-if="loaded" :labels="chartLabels"
                 :datasets="datasets"
                 :height="100"
                 :extraOptions="extraOptions"
          >
          </BarChart>
        <br>
      </div>
    </template>
    <script>
    import BarChart from '../../components/Library/UIComponents/Charts/BarChart'
    import Dropdown from "../../components/Library/UIComponents/Dropdown"
    import GroupedMultiSelectWidget from "~/components/widgets/GroupedMultiSelectWidget"
    import SelectWidget from "../../components/widgets/SelectWidget";
    
    
    export default{
      name: 'PopularChart',
      components: {BarChart, Dropdown, SelectWidget, GroupedMultiSelectWidget},
      data(){
        return {
          loaded:true,
          form:{
              day: 'Today',
              workspace:'',
              machine_family: [],
              duration: [],
              user_group: [],
              dt_start:'',
              dt_end:''
          },
          url: `/api/data_app/job_count_by_hour/`,
          chart_data: [],
          days: [ {day:"Today", id:"Today"},
                  {day:"Monday", id:"0"},
                  {day:"Tuesday",id:"1"},
                  {day:"Wednesday",id:"2"},
                  {day:"Thursday",id:"3"},
                  {day:"Friday",id:"4"},
                  {day:"Saturday",id:"5"},
                  {day:"sunday",id:"6"} ],
          chartLabels: ["00u", "1u", "2u", "3u","4u","5u", "6u", "7u", "8u", "9u", "10u", "11u", "12u", "13u", "14u", "15u","16u", "17", "18u","19u","20u","21u","22u","23u"],
          datasets: [],
          maximumValue: '',
          extraOptions:{}
    
        }
      },
      methods: {
        onInputChange() {
          this.loaded = false
          this.loadData()
        },
        async loadData() {
            await this.$axios.get(`${this.url}?day=${this.form.day}&date_start=${this.form.dt_start}&date_end=${this.form.dt_end}&workspace=${this.form.workspace}&user_group=${this.form.user_group}&machine_family=${this.form.machine_family}`)
              .then(response => {
                this.updateChart(response.data.results,response.data.maximum)
                this.loaded = true
            })
        },
        updateChart(data,maxValue) {
            this.datasets = [{
                  label: ["jobs %"],
                  backgroundColor:"#f93232",
                  data: data
            },]
            this.maximumValue = maxValue
            this.extraOptions = {
              tooltips: {
                callbacks:{
                  label: function (tooltipItems,){
                          if (tooltipItems.value > ((50/100) * maxValue)){
                            return 'busy';
                          }else if (tooltipItems.value < ((30/ 100) * maxValue) ){
                             return ' not busy';
                          }else if ( tooltipItems.value < ((40/ 100) * maxValue )){
                            return 'kind of busy'
                          }
                      }
                }
              },
              scales: {
              yAxes: [{
                  gridLines: {
                    zeroLineColor: "transparent",
                    display: false,
                    drawBorder: false,
                  },
                  ticks: {
                    max: this.maximumValue,
                    display: true,
                  }
              }],
              xAxes: [{
                  gridLines: {
                  zeroLineColor: "transparent",
                  display: false,
                  drawBorder: false,
                  },
              }],
            },
          }
        },
    
      },
      mounted() {
        this.loadData()
      },
    }
    </script>

从“../../components/Library/UIComponents/Charts/BarChart”导入条形图
从“../../components/Library/UIComponents/Dropdown”导入下拉列表
从“~/components/widgets/GroupedMultiSelectWidget”导入GroupedMultiSelectWidget
从“../../components/widgets/SelectWidget”导入SelectWidget；
导出默认值{
名称：'大众艺术'，
组件：{条形图，下拉列表，SelectWidget，GroupedMultiSelectWidget}，
数据（）{
返回{
是的，
表格：{
day:'今天'，
工作区：“”，
机器族：[]，
持续时间：[]，
用户组：[]，
dtu开始：''，
dt_结束：“”
},
url:`/api/data\u app/job\u count\u by\u hour/`，
图表数据：[]，
天：[{day:“今天”，id:“今天”}，
{day:“星期一”，id:“0”}，
{day:“星期二”，id:“1”}，
{day:“星期三”，id:“2”}，
{day:“星期四”，id:“3”}，
{day:“星期五”，id:“4”}，
{日期：“星期六”，id:“5”}，
{day:“sunday”，id:“6”}]，
图表标签：[“00u”、“1u”、“2u”、“3u”、“4u”、“5u”、“6u”、“7u”、“8u”、“9u”、“10u”、“11u”、“12u”、“13u”、“14u”、“15u”、“16u”、“17”、“18u”、“19u”、“20u”、“21u”、“22u”、“23u”]，
数据集：[]，
最大值：“”，
外部选项：{}
}
},
方法：{
onInputChange（）{
this.loaded=false
这是loadData（）
},
异步加载数据（）{
等待此消息。$axios.get（`${this.url}？day=${this.form.day}&date\u start=${this.form.dt\u start}&date\u end=${this.form.dt\u end}&workspace=${this.form.workspace}&user\u group=${this.form.user\u group}&machine\u family=${this.form.machine\u family}）
。然后（响应=>{
this.updateChart（response.data.results、response.data.max）
this.loaded=true
})
},
updateChart（数据，最大值）{
这是数据集=[{
标签：[“作业%”]，
背景颜色：“f93232”，
数据：数据
},]
this.maximumValue=maxValue
此.extraOptions={
工具提示：{
回调：{
标签：函数（工具提示项）{
如果（tooltipItems.value>（（50/100）*maxValue））{
返回“忙”；
}否则如果（工具提示项值<（（30/100）*最大值））{
返回“不忙”；
}否则如果（工具提示项值<（（40/100）*最大值））{
返回“有点忙”
}
}
}
},
比例：{
雅克斯：[{
网格线：{
zeroLineColor:“透明”，
显示：假，
抽边线：假，
},
滴答声：{
马克斯：这个，最大值，
显示：对，
}
}],
xAxes：[{
网格线：{
zeroLineColor:“透明”，
显示：假，
抽边线：假，
},
}],
},
}
},
},
安装的（）{
这是loadData（）
},
}

检查代码后，我注意到您正在数据功能中使用

数据集

和

最大值

。 要基于dataset和maximumValue更新图表数据，您需要在计算数据中使用这些变量，而不是数据。 比如说,

computed: {
   chartData() {
      let chartData = {
         labels: [],
         datasets: [...],
      }
      return chartData;
   },
   maximumValue() {
      return this.maxValue;
   }
},
methods: {
  renderBarChart() {
    this.renderChart(this.chartData, {
      legend: {
        display: false,
      },
      responsive: true,
      maintainAspectRatio: false,
      options: {
        scales: {
          yAxes: [{
              ticks: {
                  max: this.maximumValue
              }
          }],
        },
      }
    });
  },
},

---

我试着理解你的意思，但我真的不能把它翻译成代码，你能详细解释一下吗？数据集和最大值正在更新，只是图表yaxis没有重新渲染我理解你的问题，你正在通过全局图表设置来设置yaxis最大值。但是它