无法更改Chart.js 2.0 Beta

时间:2015-11-16 20:15:12

标签: javascript chart.js

我不确定这是一个错误还是我遗漏了什么,但是我不能将自定义格式应用到Chart.js 2.0 Beta条形图上的y轴标签。

以下是2.0 Beta文档中的配置选项。 Chart.js 2.0 Beta Docs

以下是我的条形图的配置选项:

options: {
  maintainAspectRatio: false,
  responsive: true,
  scales: {
    xAxes: [
      {
        stacked: true,
        gridLines: {
          show: false
        }
      }
    ],
    yAxes: [
      {
        stacked: true,
        display: true,
        labels: {
          show: false
        }
      }
    ]
  }

options: {
    // Boolean - if true, bars stack on top of each other
    stacked: false,

    hover: {
        // String - We use a label hover mode since the x axis displays data by the index in the dataset
        mode: "label"
    },

    scales: {
        // The bar chart officially supports only 1 x-axis but uses an array to keep the API consistent. Use a scatter chart if you need multiple x axes. 
        xAxes: [{
            // String - type of axis to use. Should not be changed from 'dataset'.
            scaleType: "dataset", // scatter should not use a dataset axis

            // Boolean - if true, show the scale
            display: true,

            // String - position of the scale. possible options are "top" and "bottom" for dataset scales
            position: "bottom",

            // String - id of the axis so that data can bind to it
            id: "x-axis-1", // need an ID so datasets can reference the scale

            // grid line settings
            gridLines: {
                // Boolean - if true, show the grid lines
                show: true,

                // String - color of the grid lines
                color: "rgba(0, 0, 0, 0.05)",

                // Number - width of the grid lines
                lineWidth: 1,

                // Boolean - if true draw lines on the chart area
                drawOnChartArea: true,

                // Boolean - if true draw ticks in the axis area
                drawTicks: true,

                // Number - width of the grid line for the first index (index 0)
                zeroLineWidth: 1,

                // String - color of the grid line for the first index
                zeroLineColor: "rgba(0,0,0,0.25)",

                // Boolean - if true, offset labels from grid lines
                offsetGridLines: false,
            },

            // label settings
            labels: {
                // Boolean - if true show labels
                show: true,

                // String - template string for labels
                template: "<%=value%>",

                // Number - label font size
                fontSize: 12,

                // String - label font style
                fontStyle: "normal",

                // String - label font color
                fontColor: "#666",

                // String - label font family
                fontFamily: "Helvetica Neue",
            },
        }],
        yAxes: [{
            // String - type of axis. 'linear' is the default but extensions may provide other types such as logarithmic
            scaleType: "linear",

            // Boolean - if true, show the scale
            display: true,

            // String - position of axis. Vertical axes can have either "left" or "right"
            position: "left",

            // ID of the axis for data binding
            id: "y-axis-1",

            // grid line settings
            gridLines: {
                // Boolean - if true, show the grid lines
                show: true,

                // String - color of the grid lines
                color: "rgba(0, 0, 0, 0.05)",

                // Number - width of the grid lines
                lineWidth: 1,

                // Boolean - if true draw lines on the chart area
                drawOnChartArea: true,

                // Boolean - if true draw ticks in the axis area
                drawTicks: true,

                // Number - width of the grid line representing a numerical value of 0
                zeroLineWidth: 1,

                // String - color of the grid line representing a numerical value of 0
                zeroLineColor: "rgba(0,0,0,0.25)",
            },

            // Boolean - if true ensures that the scale always has a 0 point
            beginAtZero: false,

            // Object - if specified, allows the user to override the step generation algorithm.
            //          Contains the following values
            //              start: // number to start at
            //              stepWidth: // size of step
            //              steps: // number of steps
            override: null,

            // label settings
            labels: {
                // Boolean - if true show labels
                show: true,

                // String - template string for labels
                template: "<%=value%>",

                // Function - if specified this is passed the tick value, index, and the array of all tick values. Returns a string that is used as the label for that value
                userCallback: null,

                // Number - label font size
                fontSize: 12,

                // String - label font style
                fontStyle: "normal",

                // String - label font color
                fontColor: "#666",

                // String - label font family
                fontFamily: "Helvetica Neue",
            },
        }],
    },
};

除了这个问题,我的图表工作正常。我也尝试更改Beta附带的演示图表上的标签,结果是一样的。

1 个答案:

答案 0 :(得分:5)

尝试:

scales: {
    yAxes: [{
        ticks: {
            userCallback: function(value, index, values) { return value; }
        }
    }]
}

也就是说,使用'ticks'代替'labels'和'userCallback'而不是模板。