问题：

ChartJS自定义条形图

强阳曜

2023-03-14

我正试图实现类似的图表。例如，三月份通过卡和现金（40美元现金和38美元卡支付）收取的出租车运输付款。我需要用主色和主色的浅色版本显示那个栏。我有两个问题什么样的图表能满足我的需求？如何制作具有相同颜色（深蓝色和浅蓝色）两种不同色调的酒吧？

我已经尝试了以下代码，我确信数据集没有像我前面解释的那样包括卡和现金选项。

var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: 'Train',
      backgroundColor: "rgba(168, 90, 50,1)",
      data: [50, 40, 23, 45, 67, 78, 23]
    }, {
      label: 'Bus',
      backgroundColor: "rgba(50, 168, 80,1)",
      data: [50, 40, 78, 23, 23, 45, 67]
    }, {
      label: 'Taxi',
      backgroundColor: "rgba(83, 95, 219,1)",
      data: [50, 67, 78, 23, 40, 23, 0]
    }]
};

var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
        title: {
            display: true,
            text: "Transport Mode"
        },
        tooltips: {
            mode: 'single',
            callbacks: {
                label: function(tooltipItem, data) {

                   var text = data.datasets[tooltipItem.datasetIndex].label;
                   var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];                                 

                   var total = 0;
                   var label = '';

                   for (var i = 0; i < data.datasets.length; i++) {
                       total += data.datasets[i].data[tooltipItem.index];                       
                   }  

                   if (tooltipItem.datasetIndex != data.datasets.length - 1) {
                      label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                   } else {
                        label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : $" + total;
                   }   
                   return label;
                }
            }
        },
        responsive: true,
        scales: {
            xAxes: [{                
                 gridLines: { color: "rgba(0, 0, 0, 0)" }
            }],
            yAxes: [{
            }]
        }
    }
});

谢谢你。

共有2个答案

龚同

2023-03-14

您配置的选项是正确的。这将是一个条形图，当你为每个运输模式提供多个数据集时，CARTJS会将其视为一个堆叠的条形图。

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: 'Train',
      backgroundColor: "rgba(168, 90, 50,1)",
      data: [50, 40, 23, 45, 67, 78, 23]
    }, {
      label: 'Bus',
      backgroundColor: "rgba(50, 168, 80,1)",
      data: [50, 40, 78, 23, 23, 45, 67]
    }, {
      label: 'Taxi',
      backgroundColor: "rgba(83, 95, 219,1)",
      data: [50, 67, 78, 23, 40, 23, 0]
    }]
};

var options = {
        title: {
            display: true,
            text: "Transport Mode"
        },
        tooltips: {
            mode: 'single',
            callbacks: {
                label: function(tooltipItem, data) {

                   var text = data.datasets[tooltipItem.datasetIndex].label;
                   var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];                                 

                   var total = 0;
                   var label = '';

                   for (var i = 0; i < data.datasets.length; i++) {
                       total += data.datasets[i].data[tooltipItem.index];                       
                   }  

                   if (tooltipItem.datasetIndex != data.datasets.length - 1) {
                      label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                   } else {
                        label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : $" + total;
                   }   
                   return label;
                }
            }
        },
        responsive: true,
        scales: {
            xAxes: [{                
                 gridLines: { color: "rgba(0, 0, 0, 0)" }
            }],
            yAxes: [{
            }]
        }
    };

var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'bar',
  options: options,
  data: data
});

body {  
  background: #1D1F20;
  padding: 16px;
}

canvas {
  border: 1px dotted red;
}

.chart-container {
  position: relative;
  margin: auto;
  height: 80vh;
  width: 80vw;
}

html lang-html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div class="chart-container">
    <canvas id="canvas"></canvas>
</div>

翟鸿振

2023-03-14

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: 'Train',
      backgroundColor: "rgba(168, 90, 50,1)",
      data: [50, 40, 23, 45, 67, 78, 23],
      stack: 1
    }, {
      label: 'Bus',
      backgroundColor: "rgba(50, 168, 80,1)",
      data: [50, 40, 78, 23, 23, 45, 67],
      stack: 3
    }, {
      label: 'Taxi',
      backgroundColor: "rgba(83, 95, 219,1)",
      data: [50, 67, 78, 23, 40, 23, 0],
      stack: 2
    },
    {
      label: 'Taxi cash',
      backgroundColor: "rgba(83, 55, 219,1)",
      data: [25, 10, 12, 20, 10, 12, 5],
      stack: 2
    }]
};

var options = {
        title: {
            display: true,
            text: "Transport Mode"
        },
        tooltips: {
            mode: 'single',
            callbacks: {
                label: function(tooltipItem, data) {

                   var text = data.datasets[tooltipItem.datasetIndex].label;
                   var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];                                 

                   var total = 0;
                   var label = '';

                   for (var i = 0; i < data.datasets.length; i++) {
                       total += data.datasets[i].data[tooltipItem.index];                       
                   }  

                   if (tooltipItem.datasetIndex != data.datasets.length - 1) {
                      label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                   } else {
                        label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : $" + total;
                   }   
                   return label;
                }
            }
        },
        responsive: true,
        scales: {
            xAxes: [{                
                 gridLines: { color: "rgba(0, 0, 0, 0)" },
                 stacked: true
            }],
            yAxes: [{
            }]
        }
    };

var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'bar',
  options: options,
  data: data
});

body {  
  background: #1D1F20;
  padding: 16px;
}

canvas {
  border: 1px dotted red;
}

.chart-container {
  position: relative;
  margin: auto;
  height: 80vh;
  width: 80vw;
}

html lang-html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div class="chart-container">
    <canvas id="canvas"></canvas>
</div>

类似资料：

ChartJs堆叠条形图

我有以下不同月份的数据一月：[1,5,3] Feb：[10,5] 三月：[4,8] 四月：[7] 可能：[3,1,5,0,7] 我想生成如下所示的条形图现在，我有以下代码，我想知道如何生成如上图所示的条形图。 }); 非常感谢。
堆叠条形图固定宽度条形图问题-Chartjs

我正在使用chartjs版本：2.1.4在MVC应用程序中创建图表。我正在使用控制条形图的宽度，以进行固定宽度设置。它在只有条形图的情况下工作正常，但在“堆叠条形图”的情况下，我无法确定条形图的宽度。我正在使用以下代码创建堆叠条形图，如下所示：在这种情况下，"barper"属性不起作用。请在"chartjs版本： 2.1.4"中建议我解决方案。提前谢谢
MPChart Android-自定义条形图UI

我已经浏览了android中的MPAndroidChart库：https://github.com/PhilJay/MPAndroidChart 它非常强大的库，用于在android中实现Graph和Chart。我必须显示条形图，如下所示：我所取得的成就是：问题是，我是否可以将这些条自定义为如上图所示。i、 e.圆角形状？
MPAndroidChart自定义水平条形图

这是柱状图的图片。正如您所看到的，存在对齐问题，条形图没有与标签对齐，尤其是在中间部分。此外，我希望底部轴显示10的条形图，而不是1.2、1.4、1.6等，因为不会有任何小数，所以它没有用处。我还希望每个条的值在末尾显示为一个数字，以显示每个条的总计数。图表https://imgur.com/gallery/ThHx1eJ图片样式设置
chartjs v2.0：堆叠条形图

我需要一张这样的图表：我找到了这个示例，但它使用了旧版本的。我尝试使用v2.0，但我不明白。有人能贴个例子吗？
r，ggplot —自定义我的条形图

这是我的数据结构: 我在上面运行了以下代码: 我现在想要的是，对于像“Str1”这样的例子，我有“chr”和“pl”，这两个条应该水平相邻（也适用于“Str2”、“Str3”、“Str7”和“Str8”）。但对于像“Str4”这样的情况，我只有“ch”，应该只有一个条。因此，钢筋不应相互重叠，而是水平排列。 EDIT - dput(head(myData，20)): 结构（列表（登录=结构（c（1

ChartJS自定义条形图

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档