【发布时间】：2020-06-06 15:27:11
【问题描述】：
我有一个 ChartJs 图表，下面是代码
chartColor = "#FFFFFF";
var ctx = document.getElementById('bigDashboardChart').getContext("2d");
var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, '#80b6f4');
gradientStroke.addColorStop(1, chartColor);
var gradientFill = ctx.createLinearGradient(0, 200, 0, 50);
gradientFill.addColorStop(0, "rgba(128, 182, 244, 0)");
gradientFill.addColorStop(1, "rgba(255, 255, 255, 0.24)");
gradientFill2 = ctx.createLinearGradient(0, 170, 0, 50);
gradientFill2.addColorStop(0, "rgba(128, 182, 244, 0)");
gradientFill2.addColorStop(1, hexToRGB('#edd505', 0.4));
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['2020-02-07','2020-02-08','2020-02-09','2020-02-10','2020-02-11','2020-02-12','2020-02-13'],
datasets: [{
label: "Ujani Total Water",
borderColor: chartColor,
pointBorderColor: chartColor,
pointBackgroundColor: "#1e3d60",
pointHoverBackgroundColor: "#1e3d60",
pointHoverBorderColor: chartColor,
pointBorderWidth: 1,
pointHoverRadius: 7,
pointHoverBorderWidth: 2,
pointRadius: 5,
fill: true,
backgroundColor: gradientFill,
borderWidth: 2,
data: [{ 'x' : '2020-02-07', 'y' : 16483111.23},{ 'x' : '2020-02-08', 'y' : 5624132.01},{ 'x' : '2020-02-09', 'y' : 9800147.12},{ 'x' : '2020-02-10', 'y' : 17204617.82},{ 'x' : '2020-02-11', 'y' : 19318882.05},{ 'x' : '2020-02-12', 'y' : 6291494.27},{ 'x' : '2020-02-13', 'y' : 10536864.88}]
},
{
label: "Chandani Total Water",
borderColor: "#edd505",
pointBorderColor: "#FFF",
pointBackgroundColor: "#edd505",
pointHoverBackgroundColor: "#edd505",
pointHoverBorderColor: "#FFF",
pointBorderWidth: 1,
pointHoverRadius: 7,
pointHoverBorderWidth: 2,
pointRadius: 5,
fill: true,
backgroundColor: gradientFill2,
borderWidth: 2,
data: [{ 'x' : '2020-02-11', 'y' : 744864.1},{ 'x' : '2020-02-12', 'y' : 544.93},{ 'x' : '2020-02-13', 'y' : 1564922.77}]
}]
},
options: {
layout: {
padding: {
left: 20,
right: 20,
top: 0,
bottom: 0
}
},
maintainAspectRatio: false,
tooltips: {
backgroundColor: '#fff',
titleFontColor: '#333',
bodyFontColor: '#666',
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
legend: {
position: "top",
fillStyle: "#FFF",
display: true
},
scales: {
yAxes: [{
stacked : false,
ticks: {
fontColor: "rgba(255,255,255,0.4)",
fontStyle: "bold",
beginAtZero: true,
min: 0,
maxTicksLimit: 5,
padding: 10
},
gridLines: {
drawTicks: true,
drawBorder: false,
display: true,
color: "rgba(255,255,255,0.1)",
zeroLineColor: "transparent"
}
}],
xAxes: [{
gridLines: {
zeroLineColor: "transparent",
display: false,
},
ticks: {
beginAtZero : true,
padding: 10,
min: 0,
fontColor: "rgba(255,255,255,0.4)",
fontStyle: "bold"
}
}]
}
}
});
您也可以看到图像，两个图像中显示的第一个点的日期相同，但实际上黄色数据集的日期是从 2020-02-11 开始的。 p>
或者这是因为我没有正确实现包含多个数据集的图表？任何帮助表示赞赏。如果需要任何其他信息，请告诉我。
注意：这只是一张图表，我刚刚展示了两张图片以显示错误的起点标签。
更新：在经历其他 Stack Overflow 和其他答案后，尝试将“标签”添加到这样的单个数据集。
{
label: "Chandani Total Water",
labels : ['2020-02-11','2020-02-12','2020-02-13'],
borderColor: "#edd505",
pointBorderColor: "#FFF",
pointBackgroundColor: "#edd505",
pointHoverBackgroundColor: "#edd505",
pointHoverBorderColor: "#FFF",
pointBorderWidth: 1,
pointHoverRadius: 7,
pointHoverBorderWidth: 2,
pointRadius: 5,
fill: true,
backgroundColor: gradientFill2,
borderWidth: 2,
data: [{ 'x' : '2020-02-11', 'y' : 744864.1},{ 'x' : '2020-02-12', 'y' : 544.93},{ 'x' : '2020-02-13', 'y' : 1564922.77}]
}
【问题讨论】：
-
你的html代码？
-
html 部分没有太多内容。只需 1 行 ，就是这样。