在气泡图中,如何传递X轴的标签[标签将是X轴中的值,而不仅仅是任何文本],而不是气泡图动态地计算

时间:2019-01-21 12:52:29

标签: chart.js

我有一个气泡图表,正在传递用于绘制图表的值。 气泡图会自动计算X轴的标签,但我要设置它或对其进行硬编码,而不是气泡图。

this.chart = new Chart(htmlRef, {
  type: 'bubble',
  data: {
    // labels: ["0", "60", "120", "180", "240", "300"],
    datasets: [
      {
        type:'line',
        label: 'CPU Usage',
        //data: [10,20],
        data: [{x:0,y:5,r:5},{x:10,y:20},{x:15,y:30},{x:25,y:40},{x:55,y:30},{x:80,y:40}],
        borderColor: '#4333FF',
        backgroundColor: '#3398FF',
        fill: true,
        borderWidth: 2
      }
    ]
  },
  options: {
    tooltips:{
      callbacks:{
        label:function(tooltip){
          console.log(tooltip);
          return ("CPU Utilization : "+tooltip.yLabel);
        }
      }
    },
    legend: {
      display: true,
      position: "right"
    },
    scales: {
      xAxes: [
        {
          display: true,
          gridLines: {
            lineWidth: 2,
            drawBorder: true
            ]

          },
          scaleLabel: {
            display: true,
            labelString: 'Time'
          }
        }],
      yAxes: [
        {
          display: true,
          stacked: true,
          scaleLabel: {
            display: true,
            labelString: 'Utilization'
          },
          ticks: {
            min: 0,
            max: 100,

            // forces step size to be 5 units
            stepSize: 30
          }
        }
      ]
    }
  }
})

我希望自己将Labels设置为[0,30,60,90,120],或者如果我想在单击按钮时更改它,它应该更改为[0,60,120,180,240,300]。 在任何时候,我都可以在X轴上更新标签。

Screenshot

0 个答案:

没有答案