我想创建一个图表Chart.js http://www.chartjs.org/包含两个不同的数据集：一个线数据集和一个条形数据集。
您可以在这里查看我的完整代码：
/**
*
*/
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
EDIT 2
Here a JSFiddle https://jsfiddle.net/av15kuwj/6/来展示问题
