如何在xAxs上水平添加填充

时间:2019-05-03 10:10:38

标签: javascript chart.js2

我在chart.js中使用条线混合图表。我只是想从0开始图,但它是从另一个值开始。可以将xAxes标签移到左侧,因为从此折线图开始的条形图永远不会从0开始,也不会从0开始。我只是想从0开始折线图。

var chart2 = new Chart(ctx2, {
    type: "bar",
    data: {
        labels: [20, 15, 16, 78, 45],
        datasets: [
            {
                type: 'bar',
                label: 'Expenses',
                data: ["", 11, 55, 56, 56],

            },
            {
                type: "line",
                label: 'Assets',
                data: [12, 120, 566, 56, 21],

            }
        ]
    },
    options: {
        // stepSize: 10,

        legend: {
            display: false,
        },
        scales: {
            xAxes: [
                {
                    barThickness: 5,
                    ticks: {
                        maxTicksLimit: 8,
                        minTicksLimit: 3,
                        beginAtZero: true,

                    },
                    gridLines: {
                        color: "rgba(0, 0, 0, 0)",
                    }
                }],
            yAxes: [{
                gridLines: {
                    borderDash: [8, 4]
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Retirement Assets ($)'
                },

                ticks: {
                    beginAtZero: true,
                    // stepSize: 200000,
                    scaleBeginAtZero: true,
                    maxTicksLimit: 10,
                    minTicksLimit: 5,
                    callback: function (value) {
                        var ranges = [{
                            divider: 1e6,
                            suffix: 'M'
                        },
                        {
                            divider: 1e3,
                            suffix: 'k'
                        }
                        ];

        tooltips: {
            intersect: false,
            callbacks: {
                enabled: true,
                label: function (t, d) {
                    var xLabel = d.datasets[t.datasetIndex].label;
                    var yLabel = t.yLabel;
                    // if line chart
                    if (t.datasetIndex === 0) return xLabel + ': ' + retiremnetAssests(yLabel);
                    // if bar chart
                    else if (t.datasetIndex === 1) return xLabel + ':' + retiremnetAssests(yLabel);
                },

                // label: function (tooltipItem) {
                //     console.log(chart2.type);
                //     return ("Assets" + retiremnetAssests(Number(tooltipItem.yLabel)));
                // },
                labelTextColor: function (tooltipItem, chart) {
                    return '#fff';
                },
                title: function (tooltipItem, data) {
                    return (" At age:" + tooltipItem[0].xLabel);
                }
            },


        },
        title: {
            display: true,
            text: 'Age (Years)',
            position: 'bottom'
        }
    },
    animation: {
        duration: 1000
    }
});

0 个答案:

没有答案