Question

我有一个用Charts.js api构建的图表。 x轴配置为通过moment.js显示小时的刻度。我想提供将X轴刻度从一小时更改为一周中几天的选项：我知道要做到这一点，我只需要更改图表中的代码：

    xAxes:
        [{
          type: 'time',
          distribution: 'linear',
          time:
          {
            unit: 'hour'
          }
        }],

对此：

    xAxes:
        [{
          type: 'time',
          distribution: 'linear',
          time:
          {
            unit: 'week'
          }
        }],

但我无法通过JavaScript函数实现它。我希望能够根据喜好更改此设置，因此我想构建一个函数，在调用时将更改＆＃34;单元＆＃34;属于不同的东西。有人可以帮忙吗？以下是我到目前为止的情况：

function setXAxis()
  {
    chart.config.options.scales.xAxes.time.unit.push('week');
    chart.update();
  };

完成chart.js代码：

  // Setting up progress chart via Charts.js
  var ctx = document.getElementById("myChart").getContext("2d");
  Chart.defaults.global.defaultFontColor = "#58a7dd";

  // Configuration
  var chart = new Chart(ctx,
  {
    type: 'line', 
    data: 
    [{
      x: new Date(),
      y: 1
    },
    {
      t: new Date(),
      y: 10
    }],
    options:
    {
      scales:
      {
        xAxes:
        [{
          type: 'time',
          distribution: 'linear',
          time:
          {
            unit: 'hour' //THIS IS WHAT I WANT TO CHANGE WITH THE FUNCTION
          }
        }],
        yAxes:
        [{
          type: 'category',
          labels: ['one', 'two', 'three', 'four', 'five']
        }]
      }
    }
  });

Answer 1

您可以使用options键直接更新图表的选项，而不是使用config.options更新unit也不是要推送的数组，它是一个键，因此为其赋值在你的代码中

function setXAxis()  
{
   chart.options.scales.xAxes[0].time.unit='week';
   chart.update();
};

Charts.js：用函数改变xAxis时间属性

1 个答案: