【问题标题】:Chart.js 2.0 (bar chart) reduce x-axis distance between every 2 barChart.js 2.0(条形图)减少每2条之间的x轴距离
【发布时间】:2016-08-30 04:09:24
【问题描述】:

正如标题所说,如何减少chart.js 2.0中条形之间的x轴距离,如下图所示。

目前,这是我的酒吧

这是我的代码

.

https://jsfiddle.net/mx2gh59k/

【问题讨论】:

    标签: javascript charts bar-chart chart.js2


    【解决方案1】:

    您可以制作多个数据集。一份是 2004 年的,一份是 2014 年的。 上有一个示例代码:http://www.chartjs.org/docs/

    var data = {
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
        datasets: [
            {
                label: "My First dataset",
                backgroundColor: "rgba(179,181,198,0.2)",
                borderColor: "rgba(179,181,198,1)",
                pointBackgroundColor: "rgba(179,181,198,1)",
                pointBorderColor: "#fff",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(179,181,198,1)",
                data: [65, 59, 90, 81, 56, 55, 40]
            },
            {
                label: "My Second dataset",
                backgroundColor: "rgba(255,99,132,0.2)",
                borderColor: "rgba(255,99,132,1)",
                pointBackgroundColor: "rgba(255,99,132,1)",
                pointBorderColor: "#fff",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(255,99,132,1)",
                data: [28, 48, 40, 19, 96, 27, 100]
            }
        ]
    };
    

    我做了同样的,但我现在不能发布屏幕截图。

    【讨论】:

    • 你看,问题是,每个条都需要有不同的颜色。使用该组“方式”,条形颜色将只有 2 种颜色
    • 为什么它必须有不同的颜色?