Question

我必须使用chartjs制作混合图表：折线图和条形图。

图表必须包含线图，其中包含月份的平均温度。和条形图，消费一个月

我能够显示行数据，但不能显示条形图。

这里有图表选项

var chartOptions = {
    animation: {
        easing: "easeOutBounce"
    },
    legend: {
        position: 'bottom'
    },
    tooltips: {
        mode: 'nearest',
        intersect: false
    },
    scales: {
        xAxes: [{
            id: 'lineChart',
            type: 'time',
            unit: 'day',
            unitStepSize: 1,
            time: {
                displayFormats: {
                    'millisecond': 'DD/MMMM/YYYY HH:mm',
                    'second': 'mm:ss',
                    'minute': 'HH:mm',
                    'hour': 'DD HH:mm',
                    'day': 'MMM DD',
                    'week': 'MMM DD',
                    'month': 'MMM DD',
                    'quarter': '[Q]Q - YYYY',
                    'year': 'YYYY',
                }
            },
            display: true,
            position: 'bottom',
            ticks: {
                maxTicksLimit: 8
            },
            scaleLabel: {
                display: true,
                labelString: "Heure",
            }
        }],
        yAxes: [{
            id: 'consumption',
            type: 'linear',
            position: 'left',
            ticks: {
                beginAtZero: true
            }
        },
        {
            id: 'temperature',
            type: 'linear',
            position: 'right',
            ticks: {
                beginAtZero: true
            }
        }]
    }
};

添加折线图数据集时，以下是配置：

{
    label: "Line",
    type: 'line',
    borderColor: color,
    backgroundColor: color,
    steppedLine: true,
    fill: false,
    xAxisID: "lineChart",
    yAxisID: 'temperature',
    pointRadius: 2,
    lineTension: 0,
    data: [{x : moment("11-2017", "M-YYYY"), y : 20}, {x : moment("12-2017", "M-YYYY"), y : 19}, {x : moment("1-2018", "M-YYYY"), y : 22}, {x : moment("2-2018", "M-YYYY"), y : 16}]
}

对于条形图：

{
        label: "Bar",
        type: 'bar',
        borderColor: color,
        backgroundColor: color,
        xAxisID: "lineChart",
        yAxisID: 'consumption',
        data: [{x : moment("11-2017", "M-YYYY"), y : 20}, {x : moment("12-2017", "M-YYYY"), y : 19}, {x : moment("1-2018", "M-YYYY"), y : 22}, {x : moment("2-2018", "M-YYYY"), y : 16}]
}

那么如何使条形图包含整月（如示例中的月份数据）或一整天，具体取决于图表采用哪些数据？

这是一个codepen：https://codepen.io/anon/pen/RLEJqV

Answer 1

更新到Chart.js 2.7.0修复了问题（我使用了chart.js 2.6.0）

混合图表条形图不会显示

1 个答案: