试图在ChartJS中获得一个折线图。我希望yAxis标签应分别为0、250k,500k,750k。
如何更改标签,使其始终始终为最小0?
var lineChartData = {
labels: ["Jun 1", "Jun 2", "jun 3", "Jun 4", "jun 5", "Jun 6", "Jun 7", "Jun 8", "Jun 9", "Jun
10", "Jun 11", "Jun 12", "Jun 13", "Jun 14", "Jun 15"],
datasets: [{
fillColor: "rgba(220,220,220,0)",
strokeColor: "rgba(220,180,0,1)",
pointColor: "#ffc000",
data: [190, 200, 420, 390, 150, 250, 160, 155, 200, 260, 240, 500, 300, 210, 230, 270]
},
{
fillColor: "rgba(151,187,205,0)",
strokeColor: "#ff1e6d",
pointColor: "#ff1e6d",
data: [290, 390, 300, 440, 625, 375, 390, 325, 280, 295, 385, 295, 485, 280, 265]
}]
}
Chart.defaults.global.animationSteps = 50;
Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,160,0,0.8)";
Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleLineColor = "#816cab";
Chart.defaults.global.scaleFontSize = 16;
Chart.defaults.global.scaleFontColor = "white";
var ctx = document.getElementById("canvas").getContext("2d");
var LineChartDemo = new Chart(ctx).Line(lineChartData, {
pointDotRadius: 10,
bezierCurve: false,
scaleShowVerticalLines: true,
scaleGridLineColor: "#816cab"
});
答案 0 :(得分:3)
尝试这样:
plotOptions: {
column: {
dataLabels: {
enabled: true,
y: -20,
verticalAlign: 'top',
format: '{point.label}'
}
}
},
var lineChartData = {
labels: ["FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER", "JANUARY", "FEBRUARY", "MARCH", "APRIL"],
datasets: [{
label: "X",
fillColor: "#ff1e6d",
strokeColor: "#ff1e6d",
pointColor: "#ff1e6d",
data: [290, 390, 300, 440, 625, 375, 390, 325, 280, 295, 385, 295, 485, 280, 265]
}, {
label: "Y",
fillColor: "#ffc000",
strokeColor: "rgba(220,180,0,1)",
pointColor: "#ffc000",
data: [190, 200, 420, 390, 150, 250, 160, 155, 200, 260, 240, 500, 300, 210, 230, 270]
}]
}
Chart.defaults.global.animationSteps = 50;
Chart.defaults.global.tooltipYPadding = 0;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,160,0,0.8)";
Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleLineColor = "#816cab";
Chart.defaults.global.scaleFontSize = 11;
Chart.defaults.global.scaleFontColor = "white";
new Chart(document.getElementById("fill"), {
type: 'line',
data: lineChartData,
options: {
pointDotRadius: 0,
bezierCurve: true,
scaleShowVerticalLines: false,
scaleGridLineColor: "transparent",
scales: {
yAxes: [{
ticks: {
min:0,
max:1000,
stepSize: 250
}
}]
}
}
});