我不确定这是一个错误还是我遗漏了什么,但是我不能将自定义格式应用到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附带的演示图表上的标签,结果是一样的。
答案 0 :(得分:5)
尝试:
scales: {
yAxes: [{
ticks: {
userCallback: function(value, index, values) { return value; }
}
}]
}
也就是说,使用'ticks'代替'labels'和'userCallback'而不是模板。