如何使用ChartJS将行数据点定位到条形图/折线图中间的条形图

时间:2017-03-22 18:57:48

标签: javascript html charts chart.js

我使用Chart.js v2制作组合条形图/折线图。我希望线条数据在显示时与条形数据完全匹配,因为有两组条形图数据。这就是我现在所拥有的:enter image description here

但我真的希望线图上的每个蓝色数据点与每个蓝色条的顶部中间匹配,并且每个绿色数据点匹配到每个绿色条的顶部中间,而不是它们是放在" x值"的中心。鉴于Chart.js文档,我似乎无法弄清楚如何做到这一点。

这是我的代码:

var monthlyDownloadsData = {
    labels: ["3 Months","2 Months","Last Month","This Month","Next Month"],
    datasets: [{
        label: "App Store",
        data: [150, 175, 135, 120, 115],
        backgroundColor: "rgba(102, 179, 255, 1)",
        borderColor: "rgba(255, 255, 255, 1)"
    }, {
        label: "Google Play",
        data: [130, 105, 115, 95, 75],
        backgroundColor: "rgba(140, 255, 102, 1)",
        borderColor: "rgba(255, 255, 255, 1)"
    }, {
        type: "line",
        label: "App Store",
        data: [150, 175, 135, 120, 115],
        backgroundColor: "rgba(102, 179, 255, 0.5)"
    }, {
        type: "line",
        label: "Google Play",
        data: [130, 105, 115, 95, 75],
        backgroundColor: "rgba(140, 255, 102, 0.5)"
    }]
};

var monthlyDownloadsOptions = {
    title: {
        display: false
    },
    scales: {
        xAxes: [{
            gridlines: {
                display: false
            }
        }]
    },
    responsive: true,
    maintainAspectRatio: false
};

var monthlyDownloads = document.getElementById('monthlydownloads').getContext('2d');
new Chart(monthlyDownloads, {
    type: 'bar',
    data: monthlyDownloadsData,
    options: monthlyDownloadsOptions
});

非常感谢任何帮助!

0 个答案:

没有答案