Question

我想创建一个包含Chart.js的图表，其中包含两个不同的数据集：一行数据集和一个条形数据集。

您可以在此处查看我的完整代码：

-(void)detailsReturned: (NSNotification *) notification{

    [self updateTable];

}

使用此代码，我设法将两个数据集放入一个图表中，但仍有两个问题。第一个问题是第一个和最后一个条与yAxis重叠：

如何禁用重叠？

剩下的第二个问题如下：行数据和条形数据总是不匹配。这意味着：如果我有一个08:00 o时钟的行数据条目，这并不意味着有一个08:00 o时钟的条形数据条目。相反的另一种方式是：如果有一个12点钟的条形数据，那并不意味着有一个12点钟的行数据匹配。行数据可以有X个数据条目，条形数据可以有Y个数据条目。为此，我为行数据创建了x和y值：

/**
 * 
 */
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;
}

这对于行数据非常有效。但不幸的是，我无法找到条形数据的这种选择。条形数据不接受x和y值，它只接受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值，因为我可以为线条数据定义它们？

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"
    }
  }
}],

在XAx中擦除行类型：“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"
}

如果“bar”的值为 null ，则不会显示。并且因为“bar”具有与“line”相同数量的元素，所以它们总是匹配。

Chart.js：组合线和条数据

1 个答案: