【发布时间】：2016-07-18 20:15:53
【问题描述】：
我想用Chart.js 创建一个图表，其中包含两个不同的数据集：一个线数据集和一个条形数据集。
你可以在这里查看我的整个代码：
/**
*
*/
function initCombinedChart() {
/**
*
*/
$("canvas").each(function() {
var config = getConfigCombined($(this).attr("id"));
var context = $(this);
var combined = new Chart(context, config);
});
}
/**
*
* @param id
* @returns {___anonymous464_473}
*/
function getConfigCombined(id) {
var currentId = id;
var currentIdNumber = currentId.substring((currentId.lastIndexOf("_") + 1), currentId.length);
var entry = $("#" + id).data("entry");
var labelMeasure = $("#evaluations_combined_measures").data("txt");
var labelInsulin = $("#evaluations_combined_insulins").data("txt");
var datasetLine = dataCombinedLine(labelMeasure, entry);
var datasetCombined = dataCombinedBar(labelInsulin, entry);
var config = {
type: "bar",
data: {
labels: labelsFromEntry(entry),
datasets: []
},
options: {
responsive: true,
title: {
display: false
},
legend: {
position: "bottom"
},
scales: {
xAxes: [{
position: "bottom",
type: "time",
time: {
unit: "hour",
format: "HH:mm",
tooltipFormat: "HH:mm",
displayFormats: {
hour: "HH:mm",
day: "HH:mm",
week: "HH:mm",
month: "HH:mm",
quarter: "HH:mm",
year: "HH:mm"
}
},
gridLines : {
display : false
}
}],
yAxes: [{
type: "linear",
display: true,
position: "left",
id: "y-axis-0",
gridLines: {
show: true,
}
}, {
type: "linear",
display: true,
position: "right",
id: "y-axis-1",
gridLines: {
show: false
}
}]
},
}
}
if (datasetLine != null) {
config.data.datasets.push(datasetLine);
}
if (datasetCombined != null) {
config.data.datasets.push(datasetCombined);
}
return config;
}
/**
*
* @param entry
* @returns {Array}
*/
function labelsFromEntry(entry) {
var result = [];
var entryCombined;
var entryMeasure;
var entryInsulin;
if (entry.indexOf("-") >= 0) {
entryCombined = entry.split("-");
entryMeasure = entryCombined[0];
entryInsulin = entryCombined[1];
} else {
entryMeasure = entry;
entryInsulin = "";
}
var entryMeasureArray = entryMeasure.split(";");
var entryInsulinArray = entryInsulin.split(";");
entryMeasureArray.forEach(function(entry) {
var entryPair = entry.split(",");
var date = parseFloat(entryPair[0]);
var dateFormat = moment(date).format("HH:mm");
if (!result.includes(dateFormat)) {
result.push(dateFormat);
}
});
entryInsulinArray.forEach(function(entry) {
var entryPair = entry.split(",");
var date = parseFloat(entryPair[0]);
var dateFormat = moment(date).format("HH:mm");
if (!result.includes(dateFormat)) {
result.push(dateFormat);
}
});
return result;
}
/**
*
* @param label
* @param entry
* @returns {___anonymous3118_3127}
*/
function dataCombinedLine(label, entry) {
var dataset = {
type: "line",
label: label,
lineTension: 0,
backgroundColor: "#4078A7",
borderCapStyle: "butt",
borderJoinStyle: "miter",
borderColor: "#4078A7",
pointRadius: 5,
pointBorderColor: "#4078A7",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 3,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#FFFFFF",
pointHoverBorderWidth: 3,
pointHitRadius: 5,
data: dataCombinedLineFromEntries(entry),
yAxisID : "y-axis-0",
fill: false
}
return dataset;
}
/**
*
* @param label
* @param entry
* @returns {___anonymous3299_3308}
*/
function dataCombinedBar(label, entry) {
var dataset = {
type: "bar",
label: label,
backgroundColor: "#239471",
borderCapStyle: "butt",
borderJoinStyle: "miter",
borderColor: "#239471",
data: dataCombinedBarFromEntries(entry),
yAxisID : "y-axis-1"
}
return dataset;
}
/**
*
* @param entry
* @returns {Array}
*/
function dataCombinedLineFromEntries(entry) {
var result = [];
var entryMeasures = entry.split("-")[0];
var entryMeasuresArray = entryMeasures.split(";");
entryMeasuresArray.forEach(function(entry) {
var entryPair = entry.split(",");
var date = parseFloat(entryPair[0]);
var value = entryPair[1];
var data = {
x: moment(date).format("HH:mm"),
y: entryPair[1]
}
result.push(data);
});
return result;
}
/**
*
* @param entry
* @returns {Array}
*/
function dataCombinedBarFromEntries(entry) {
var result = [];
if (entry.indexOf("-") >= 0) {
var entryInsulins = entry.split("-")[1];
var entryInsulinsArray = entryInsulins.split(";");
entryInsulinsArray.forEach(function(entry) {
var entryPair = entry.split(",");
var date = parseFloat(entryPair[0]);
var value = entryPair[1];
var data = {
x: moment(date).format("HH:mm"),
y: entryPair[1]
}
result.push(entryPair[1]);
});
}
return result;
}
使用此代码，我设法将两个数据集放入一个图表中，但还存在两个问题。第一个问题是第一个和最后一个条与yAxis重叠：
如何禁用重叠？
剩下的第二个问题是：线数据和柱数据并不总是匹配的。这意味着：如果我有一个 08:00 点的行数据条目，这并不意味着 08:00 点有一个条形数据条目。反之亦然：如果有 12:00 点的柱形数据，并不意味着 12:00 点有匹配的线数据。线数据可以有 X 个数据条目，而条形数据可以有 Y 个数据条目。为此，我为行数据创建了 x 和 y 值：
entryMeasuresArray.forEach(function(entry) {
var entryPair = entry.split(",");
var date = parseFloat(entryPair[0]);
var value = entryPair[1];
var data = {
x: moment(date).format("HH:mm"),
y: entryPair[1]
}
result.push(data);
});
这非常适用于行数据。但不幸的是，我找不到这样的条形数据选项。条形数据不接受 x 和 y 值，它只接受 y 值：
entryInsulinsArray.forEach(function(entry) {
var entryPair = entry.split(",");
var date = parseFloat(entryPair[0]);
var value = entryPair[1];
var data = {
x: moment(date).format("HH:mm"),
y: entryPair[1]
}
result.push(entryPair[1]);
});
那么我如何为条形数据定义 x 和 y 值，因为我可以为线数据定义它们？
EIDT
我使用的是最新版本 2.1.6
编辑 2
这里是JSFiddle 来演示问题
【问题讨论】：
-
从你的小提琴第一个栏没有显示
-
调试帮助问题需要minimal reproducible example，如help center。您的代码不是最少的。请edit您的问题，以确保您的代码是最小的（只有在您的问题中重现您的问题所必需的代码）、完整（用户不需要任何其他东西来重现您的问题）和可验证（提供的代码确实重现您面临的确切问题）。因为您的问题与 Stack Overflow 无关。注意这也是常见的downvote reason。
-
如果您没有看到所有要求都正确发布，那么您就没有理解问题。我也已经得到了很好的答案。所以其他人确实很好理解。如果您没有看到需要回答，则根本不需要回答。其他人也确实赞成我的问题。所以这个问题需要知识。不知道您为什么要使用这种简单的方法。
标签： javascript chart.js