javascript - Chart.js:组合线和条数据

Question

我想用 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证明问题

Answer 1

第一个问题:

如何禁用重叠？

xAxes: [{
  position: "bottom",
  //type: "time",    // erase this line
  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"
    }
  }
}], 

在 XAxes 中删除 type: "time" 行，此选项意味着图形必须从零开始，没有边距。

第二个问题:

我认为表示数据的最佳方式:

var data = [
  { x: "08:00", y_line: "110", y_bar: "30"}, 
  { x: "09:00", y_line: "120", y_bar: "35"}, 
  { x: "10:00", y_line: "130", y_bar: null},
  { x: "11:00", y_line: "140", y_bar: 45}
];

通过这种表示，您强制每个“时间”有两个测量值，一个用于条形，一个用于可以具有数值或 null 值的线。

然后通过一些函数你可以获得集合:

function getLine(){
    var arr = [];
    data.forEach(function(entry) { 
       var data = { x: entry.x, y: entry.y_line}
       arr.push(data);
    });
    return arr;
}

function getBar(){
    var arr = [];
    data.forEach(function(entry) { 
       arr.push(entry.y_bar);
    });
    return arr;
}

function getLabels(){
    var arr = [];
    data.forEach(function(entry) { 
       arr.push(entry.x);
    });
    return arr;
}

然后像这样在配置中引入值:

{
 type: "bar",
 label: labelInsulin,
 backgroundColor: "#239471",
 borderCapStyle: "butt",
 borderJoinStyle: "miter",
 borderColor: "#239471",
 data: getBar(),           // like this
 yAxisID : "y-axis-1"
}

如果“栏”的值为 null，则它不会出现。并且由于“条”与“线”的元素数量相同，因此它们始终匹配。