问题标签 [chart.js2]

我正在生成一个 Chart.JS 条形图，呈现如下：

如您所见，图例的底部和网格/图表的顶部挤在一起。此外，各个条形图被挤在一起，超出了绝对必要的程度，使得这些值有点难以阅读；请注意，红色条左侧和蓝色条右侧有足够的空间。象限本身有足够的空间来在图例和网格/图形之间添加一个 shim 或 shiv 空间。

我怎样才能“消除”这些元素以使数据更清晰、演示更吸引人？

这是正在使用的代码：

HTML

CSS

“row”和“col-md-6”类是 Bootstrap。“graph_container”必须是 Chart.JS 类（它不是我的类）。

JAVASCRIPT/jQuery

更新

这不是一个完整的解决方案，但我以这种方式改进了它：

IOW，我将高度值添加到画布，以便网格/图形现在更好地填充象限：

也许，它可以使用逗号作为 y 轴编号，但条形可以在水平方向上展开得更多。

如何在甜甜圈图形中输入数字？

我需要显示每个元素的百分比。我现在开始看图表JS，可以吗？

我想展示这些

我在我的数据值中添加逗号，如下所示：

...但是条形图 y 轴上的“上下文”值是“原始”（无逗号），如下所示：

通过添加逗号以便阅读：

?

我有一个简单的 ajax 调用，它正在加载一个 php 页面。我正在使用 chart.js 来构建基于动态 MySQL 数据的条形图。

如果我直接浏览到此页面，它工作正常。但是，如果我使用以下代码加载页面，页面上的数据会加载，但图表不会。

我用来调用 ajaxtest.php 页面的脚本位于 index.php 页面中：

在这个文件中，我在 head 部分加载了 bootstrap.css。在页面底部，我正在加载 jquery.js、bootstrap.js 和一些 customs.js 文件（按此顺序）。如果我从 index.php 页面中删除这些，则没有任何区别，并且图表仍然无法加载。

在 ajaxtest.php 页面上，我还让它在相同的位置调用相同的文件。

我认为这可能是我的问题，所以当我从 index.php 页面中删除它们时，它仍然无法加载。

我很困惑为什么在通过 ajax 调用它时它不会加载，但当我直接点击它时它会加载。我在萤火虫/开发人员工具中看不到任何错误。

任何想法都将不胜感激。

Chart.js 2+ 不再返回饼图中图例项的百分比。

我将图例存储在名为 .html 的 html 中的单独项目中#legend。然后我将它设置innerHTML为myPieChart.generateLegend(). 它返回颜色和名称，但我希望能够覆盖这个 HTML 模板以返回百分比，所以输出看起来像：

• 一个
• 乙
• C

至：

• 一个（13%）
• 乙 (50%)
• C (37%)

我曾经用这个legendTemplate论点来做，但它似乎不再起作用了：

如果不同标签的值大小相对相同，则雷达图可以正常工作。[ jsFiddle ]

如果任何标签相对于其他标签具有非常大的值，则图表将被挤压成一条直线。这看起来很可怕。[ jsFiddle ]

这个问题显示了如何设置自定义scaleStepWidth和scaleStep，但如果我使用它，图表就会超出它的边界。[ jsFiddle ]

有没有办法scaleStepWidth为不同的标签设置不同的？

我有一个数据集，它需要与 JavaScript 变量采用相同的格式，如下所示：

数据是用 PHP 构建的，但我不能那样做。

这是我在 PHP 中的内容（示例数据，但填充方法相同）：

json_encode();当我这样做时，这将返回给 JavaScript console.log(JSON.stringify(theData))：

这适用于 Chart.js 2.3。顶部的示例数据直接来自 Chart.js 示例数据。上面的 JSON 是我的结果。因为它们不相同，所以图表不起作用。我可以更改我的 PHP 以使其更像顶部的示例吗？

我正在尝试使用 ng2-charts 获取图表来显示我的数据。使用模型数据一切正常，但是当我尝试遍历父组件传递的数组时，图形本身不会显示，只有正交标记，控制台中没有任何内容。我已将问题缩小到标签数组：如果您删除 LineChartComponent 中的注释行，它就可以工作。

这是我的代码：

注意：没有一个数组是未定义的。两者都具有良好的结构，包含我的所有数据并具有适当的打字。此外，Data.date返回一个字符串。

什么可能导致这种行为？

谢谢 ！

Chart.js v2.x 可以使用一个 y 轴生成包含 2 条未堆叠线的组合堆叠条形图吗？如果是这样，怎么做？

下面的小提琴有2个y轴。如果右 y 轴和左轴一样具有最大值 6000，则下降线会渲染得更好。

jsfiddle 示例。

以下是供参考的代码。

根据Chart.js 2.3 版的“刻度配置”，只能为Y 轴上的刻度设置填充（“水平刻度”）：

填充 | 编号 |10 | 刻度标签和轴之间的填充。注意：仅适用于水平秤。

这就像一个魅力：

但是草案说，我也需要在X 轴上进行一些填充

如何使用 Chart.js 实现这一点？

也许可以使用插件？