Question

我在项目上使用chart.js，在html上使用画布。

但是，我输入的数据并不与标签一致。

数据条未正确跟随轴。有没有办法在栏上添加填充？或类似的东西？

我尝试了很多方法，但无法做到正确。

这是我的配置：

$(window).on("load", function(){

//Get the context of the Chart canvas element we want to select
var ctx = $("#bar-multi-axis");

// Chart Options
var chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    responsiveAnimationDuration:500,
    hoverMode: 'label',
    stacked: false,
    title:{
        display:false,
        text:"Chart.js Bar Chart - Multi Axis"
    },
    scales: {
        xAxes: [{
            type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
            display: true,
            position: "bottom",
            id: "x-axis-1",
            gridLines: {
                color: "#f3f3f3",
                drawTicks: true,
            },
            scaleLabel: {
                display: true,
            }
        }, {
            type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
            display: false,
            position: "bottom",
            id: "x-axis-2",
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            display: true,
            gridLines: {
                color: "#f3f3f3",
                drawTicks: true,
            },
            scaleLabel: {
                display: false,
            }
        }]
    }
};

// Chart Data
var chartData = {
    labels: ["Ações", "Opções", "Termo", "BM&F", "Garantias","Tesouro Direto","Financeiro","BTC","Renda Fixa","Clubes e fundos"],
    datasets: [{
        label: "Ações",
        data: [45],
        backgroundColor: "#5175E0",
        hoverBackgroundColor: "rgba(81,117,224,.8)",
        borderColor: "transparent",
        xAxisID: "x-axis-1",
    }, {
        label: "Opções",
        data: [28],
        backgroundColor: "#16D39A",
        hoverBackgroundColor: "rgba(22,211,154,.8)",
        borderColor: "transparent",
        xAxisID: "x-axis-1",
    },
    {
        label: "Termo",
        data: [-40],
        backgroundColor: "#F98E76",
        hoverBackgroundColor: "rgba(249,142,118,.8)",
        borderColor: "transparent",
        xAxisID: "x-axis-1",
    },
    {
        label: "BM&F",
        data: [25],
        backgroundColor: "#F00E76",
        hoverBackgroundColor: "rgba(249,142,118,.8)",
        borderColor: "transparent",
        xAxisID: "x-axis-1",
    },
    {
        label: "Garantias",
        data: [-16],
        backgroundColor: "#E12E76",
        hoverBackgroundColor: "rgba(249,142,118,.8)",
        borderColor: "transparent",
        xAxisID: "x-axis-1",
    },
    {
        label: "Tesouro Direto",
        data: [10],
        backgroundColor: "#E98A76",
        hoverBackgroundColor: "rgba(249,142,118,.8)",
        borderColor: "transparent",
        xAxisID: "x-axis-1",
    },
    {
        label: "Financeiro",
        data: [-12],
        backgroundColor: "#F98A76",
        hoverBackgroundColor: "rgba(249,142,118,.8)",
        borderColor: "transparent",
        xAxisID: "x-axis-1",
    },
    {
        label: "BTC",
        data: [50],
        backgroundColor: "#F18E76",
        hoverBackgroundColor: "rgba(249,142,118,.8)",
        borderColor: "transparent",
        xAxisID: "x-axis-1",
    },
    {
        label: "Renda Fixa",
        data: [24],
        backgroundColor: "#D98E76",
        hoverBackgroundColor: "rgba(249,142,118,.8)",
        borderColor: "transparent",
        xAxisID: "x-axis-1",
    },
    {
        label: "Clubes e fundos",
        data: [-24],
        backgroundColor: "#A98E76",
        hoverBackgroundColor: "rgba(249,142,118,.8)",
        borderColor: "transparent",
        xAxisID: "x-axis-1",
    }]


};

var config = {
    type: 'horizontalBar',

    // Chart Options
    options : chartOptions,

    data : chartData
};

// Create the chart
var lineChart = new Chart(ctx, config);
});

Answer 1

我建议只使用一个数据集，并使用数组backgroundColor属性为每个条形定义特定颜色：

datasets: [{
    label: "my set",
    data: [45, 28, -40, 25, -16, 10, -12, 50, 24, -24],
    backgroundColor: ["rgba(255, 99, 132, 0.6)", "rgba(255, 159, 64, 0.6)", "rgba(255, 205, 86, 0.6)", "rgba(75, 192, 192, 0.6)", "rgba(54, 162, 235, 0.6)", "rgba(153, 102, 255, 0.6)", "rgba(201, 203, 207, 0.6)", "rgba(155, 99, 132, 0.6)","rgba(255, 99, 32, 0.6)"],
    borderColor: "transparent",
    xAxisID: "x-axis-1",
}]

检查我的小提琴：https://jsfiddle.net/beaver71/2hp160zh/

＆＃13;

// Chart Options
var chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    responsiveAnimationDuration:500,
    hoverMode: 'label',
    stacked: false,
    legend: {display:false,},
    title:{
        display:false,
        text:"Chart.js Bar Chart - Multi Axis"
    },
    scales: {
       xAxes: [{
            type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
            display: true,
            position: "bottom",
            id: "x-axis-1",
            gridLines: {
                color: "#f3f3f3",
                drawTicks: true,
            },
            scaleLabel: {
                display: true,
            }
        }, {
            type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
            display: false,
            position: "bottom",
            id: "x-axis-2",
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            display: true,
            type: 'category',
            gridLines: {
                color: "#f3f3f3",
                drawTicks: true,
            },
            scaleLabel: {
                display: false,
            }
        }]
    }
};

// Chart Data
var chartData = {
    labels: ["Ações", "Opções", "Termo", "BM&F", "Garantias","Tesouro Direto","Financeiro","BTC","Renda Fixa","Clubes e fundos"],
    datasets: [{
        label: "my set",
        data: [45, 28, -40, 25, -16, 10, -12, 50, 24, -24],
        backgroundColor: ["rgba(255, 99, 132, 0.6)", "rgba(255, 159, 64, 0.6)", "rgba(255, 205, 86, 0.6)", "rgba(75, 192, 192, 0.6)", "rgba(54, 162, 235, 0.6)", "rgba(153, 102, 255, 0.6)", "rgba(201, 203, 207, 0.6)", "rgba(155, 99, 132, 0.6)","rgba(255, 99, 32, 0.6)"],
        borderColor: "transparent",
        xAxisID: "x-axis-1",
    }]
};

var config = {
    type: 'horizontalBar',

    options : chartOptions,
    data : chartData
};

var lineChart = new Chart('myChart', config);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="600"></canvas>

＆＃13;

chart.js我的数据不符合标签，

1 个答案: