【问题标题】:Chart.js Bubble chart with custome X-axis labelsChart.js 带有自定义 X 轴标签的气泡图
【发布时间】:2016-06-13 02:25:15
【问题描述】:

无论如何我可以将 X 轴标签自定义为单词而不是数字比例吗? 我尝试在我的数据中插入标签属性,但它不起作用。

这是我的代码:

var bubbleChartData = 
    {

        datasets: [
        {
            label: "My First dataset",
            backgroundColor: randomColor(),
            data: [4, 2, 3, 4, 5]
        }],
        labels: [
            "Bad",
            "Average",
            "Good",
            "Very Good",
            "Perfect"
        ]   
    };

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myChart = new Chart(ctx, {
            type: 'bubble',
            data: bubbleChartData,
            xAxisID: 'testing',
            options: {

                responsive: true,
                title:{
                    display: true,
                    text:'Chart.js Bubble Chart'
                },


            }
        });
    };

这是我得到的:

【问题讨论】:

  • 我的经验是改变 Y 轴,在数字上附加一些格式,我使用了 scaleLabel 回调选项。在附加/生成图表之前,请参阅文档,将代码放在上面。

标签: javascript angularjs charts chart.js


【解决方案1】:

在您的选项中使用 xAxes 的回调:

options: {
  responsive: true,
  title:{
      display: true,
      text:'Chart.js Bubble Chart'
  },    
  scales: {
    xAxes: [{
      ticks: {
        callback: function(value, index, values) {
          return 'value is ' + value;
        }
      }
    }]
  }
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-04-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-02
    • 2017-04-30
    • 1970-01-01
    • 2021-05-26
    相关资源
    最近更新 更多