首页 > 解决方案 > 重绘图表后,line_chart 的 Chart.js 问题未在 x 轴上显示所有日期

问题描述

我正在使用 rails 6 通过 Chart kick 绘制图表。当我第一次将数据传递到图表时,折线图 x 轴工作,但是当我尝试更改数据并重绘图表时,line_chart 不会在 x 轴上显示所有日期。这是我的重绘js:

import ApplicationController from "./application_controller";
import StimulusReflex from "stimulus_reflex";

import Chartkick from "chartkick";

export default class extends ApplicationController {
   static targets = [];
   static values = {};

   connect() {
      StimulusReflex.register(this);
      console.log("Charts Controller Loaded");
   }

   afterReflex() {
      console.log(this.data.get("chartdata"));
      let dimensions = JSON.parse(this.data.get("dimensions"));
      // console.log(this.element);
      // console.log(dimensions[0]);
      // console.log(dimensions[1]);

      let chart = Chartkick.charts["dash-chart"];

      chart.updateData(JSON.parse(this.data.get("chartdata")), {
         points: false,
         min: dimensions[0],
         max: dimensions[1],
         library: {


            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    mode: 'index',
                    intersect: false
                }
            },
            hover: {
                mode: 'nearest',
                intersect: false
            },


         },

      });



      chart.redraw();

      //console.log(this.data.get("chartdata"));
  }
 
}

我的输入数据是chartdata,例如["Jul 16, 21", 146.39]。

标签: javascriptruby-on-railschart.jschartkick

解决方案


推荐阅读