当前位置: 首页 > 知识库问答 >
问题:

ChartJS条形图在使用cdn[复制]时不尊重禁用的图例

薛弘阔
2023-03-14

我对ChartJS还不熟悉,但这让我感觉好像遇到了一个bug。我在下面编写了JSFIDLE作为示例来演示这个问题。

https://jsfiddle.net/4mxvb3yg/

超文本标记语言

<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
<canvas id="myChart"></canvas>

Javascript

var servicelabels = ["January", "February", "March", "April", "May", "June", "July"];
var servicechartData = [65, 0, 80, 81, 56, 85, 40];


barColors = ["#008000","#0000FF","#800080","#00FF00","#FF00FF","#008080","#FFFF00","#808080","#00FFFF","#000080","#800000","#008000","#0000FF","#800080","#00FF00","#FF00FF","#008080","#FFFF00","#808080","#00FFFF","#000080","#800000"];

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: 'bar',
data: { labels: servicelabels, datasets: [{ data: servicechartData, backgroundColor: barColors}]},
options: { legend: {display: false }}});

目前,小提琴的表现与我所希望的一样(没有图例的条形图,因为其显示属性设置为false)。但是,如果您取消注释HTML中的顶行以使用CDN链接作为源,它将不再尊重已禁用的图例。

我目前正在进行的项目需要这个cdn源链接,我需要禁用图例,因此我的问题。

任何建议都很好,谢谢您的关注。安得烈

共有1个答案

况经纬
2023-03-14

这可能是由于版本不匹配,根据最新版本的chart.js,以删除图例。CDN可能使用了最新的chart.js

  options: {
          plugins:{   
             legend: {
               display: false
                     },
                  }
             }
 类似资料:
  • 我正在尝试使用chartJs创建一个堆叠条形图(垂直或水平)。在遵循了他们的文档并尝试了各种解决方案之后,我仍然无法获得要叠加的值。 我创造了一把小提琴https://jsfiddle.net/trig79/oxantepu/1/ 感谢任何关于我哪里出错的指导

  • 我试图创建一个ChartJs条形图,其中包含标签上的日期。 图表上的横条相互重叠,不均匀。当删除时间刻度时工作良好,但是,标签没有进行日期排序。标签和数据是动态填充的,因此在呈现之前无法对其进行排序。 下面是示例图像, 而且,如果删除了刻度(xAxis),它将给出正确的输出(但未排序) 例子:https://codepen.io/karthikkbala/pen/QWjVQqb 样本数据:

  • 我需要一种在ChartJS中显示堆叠条形图中多个数据段的方法。在官方文档中,标签属于堆栈的每个部分,但我需要这些部分是独立的。 我已经模拟了我需要实现的输出类型。我们每天有三个堆叠的条,每个条显示一个单独的数据集。在每个数据集中,我们有一个段,它实际上是该条的子集。 不幸的是,中的属性似乎不接受数组。这个图表可以使用ChartJS吗?

  • 我正在尝试使用ChartJS创建一个条形图,如下所示: 我想知道如何分别为每个条添加渐变颜色,并根据它们的高度添加渐变颜色。 我在这里找到了一个非常接近的解决方案,但它为整个图形设置了,而不是单个条。 另外,如果我为每个条创建渐变,这个解决方案更接近,但是,我想根据条的高度设置渐变。 有没有办法指定根据酒吧高度,而不是坐标上的

  • 我有以下不同月份的数据 一月:[1,5,3] Feb:[10,5] 三月:[4,8] 四月:[7] 可能:[3,1,5,0,7] 我想生成如下所示的条形图 现在,我有以下代码,我想知道如何生成如上图所示的条形图。 }); 非常感谢。

  • 我试图理解他们条形图上的ChartJS文档。这对我来说没有意义,因为顶部的标签在一次意义上看起来似乎只适用于第一个栏(基于颜色),在另一种意义上,它适用于整个图表(它是唯一一个不在工具提示中的标签,它位于前面和中间) 我一直在努力使它更像他们的折线图,它显示了一个带有标签的图例和一个与图表上每条线相关的彩色正方形。(他们没有多行图表的示例,但它确实是这样工作的)。 我希望在顶部有一个图例,表示浅绿