-
29 votesanswersviews
Chart.js 2.0圆环工具提示百分比
我使用过chart.js 1.0并且我的圆环图工具提示显示基于数据除以数据集的百分比，但是我无法用图表2.0复制它 . 我搜索了高低，并没有找到一个有效的解决方案 . 我知道它会受到选择，但我尝试的所有东西都让馅饼功能失调 . <html> <head> <title>Doughnut Chart</title> <scrip... -
0 votesanswersviews
Chart.js - 设置最大Y轴值并保持步骤正确
我正在使用Chart.js 2.6 . 我有一个图表，我已添加自定义分页来逐步浏览数据集，因为它非常大 . 我的分页和一切都很好，我只是 grab 我的集合中的下一个数据块并使用新的数据对象更新chart.config.data，然后在图表上调用.update（） . 但是，为了使图表有意义，我需要在用户分页时保持左（Y轴）比例相同 . 通常Chart.js会根据图表中的数据重建它，但我希望它始终... -
2 votesanswersviews
Chart.js - 如何计算条形图上的Y轴？
有人能告诉我Chart.js 2.6用来计算条形图中Y轴的数学逻辑吗？我创建了一个分页功能，允许我翻阅具有大量列的条形图 . 它工作得很好，除了我需要Y轴保持不变，因为图表的数据集发生了变化 . 为此，我获取图表的数据并创建它的一个子集，例如前20个记录，并将其作为数据对象提供给图表 . 为了使Y轴固定，我获取完整数据集中的最大值，并将其作为 ticks 中的 max 值提供给图表中的 yAxes... -
2 votesanswersviews
在Chart.js条形图中指定每个条的不同厚度
处理自定义图表，该图表可以根据数据提供的值确定条形图或水平条形图中条形图的厚度，而不是使用barThickness或barPercentage / categoryPercentage预设的宽度 . 目标：我可以使用包含 x 值和 thickness 的数据创建水平条形图，其中厚度成为该条相对于其他条的相对厚度 . 例如，这段代码： const data = { labels: ['North... -
1 votesanswersviews
Chart.js 2.0 - 如何更改画布/图表元素的默认外观
我正在使用新的Chart.js并尝试完成几个自定义 . 在JS中精通但是画布的新手，我有点挣扎 . 我会尽量提供尽可能多的信息 . 相关链接 JSBin工作演示 Chart.js 2.0 Documentation Chart Screenshot - Current State Chart Screenshot - Desired State 代码 - JSBin Java... -
2 votesanswersviews
动态更改x轴上的日期
我有一个图表，我的x轴是一个时间轴我需要我的时间轴根据我的数据动态改变 . 例如：如果日期范围（在我的数据中）很大，我需要我的轴显示几个月，如果范围小，那么几天 . 我试着让它更清楚：我有一系列日期： '09/07/2016' - '09/02/2016' - 我的轴需要根据天数显示我的数据 . 但是：如果我的范围是： '09/07/2016' - '09/02/2017' 那么我的轴需要显示... -
0 votesanswersviews
Chart.js中带有JSON数据的堆积条形图
我有以下JSON数据 . [ { "date": "2016-05-01T00:00:00", "productInformation": [ { "productName": "Apple", "... -
2 votesanswersviews
如何在Chart.js中外部栏和左/右侧之间的条形图中添加填充？
在Chart.js中创建条形图时，所有条形都会占据整个水平空间 . 如何在最左侧和最右侧的栏中添加一些填充以实现您在下图中看到的内容： 另外，如果杆在中心对齐并且在杆本身上使用最大宽度百分比，则可以实现这一点，使得它们永远不会填满整个空间 . 但我也找不到任何选择 . 目前我正在添加两个带有空白标签的 0 值，这有效，但它只是一个解决方法： var data = { labels: ['... -
0 votesanswersviews
Chart.js绘制带有限制线的堆积条形图
我想使用Chart.js在图表中绘制一条水平线 . 但是我无法做到 . 我发现这个example但是我've had trouble converting it to a bar chart as it'使用点来确定放置线的位置和条形图似乎没有使用"points" var data = { labels: ["JAN", "FEB"... -
1 votesanswersviews
在React Js中使用的Chart js中无法获得条形图颜色
这是我第一次使用Chart Js，我设法让它显示在我的页面上，但是不会显示键'label'，'backgroundColor'，'borderColor'和'borderWidth' . 键'标签'和'数据'工作正常，因为我可以看到图表中的标签和条形 . 我尝试将非显示键分配给变量，就像'标签'和'数据'一样，看看它是否会以这种方式运行但没有运气 . 我也试过传递十六进制颜色和常规颜色名称，如红色... -
0 votesanswersviews
MVC / Chart.js：带折线图的高级堆积条形图
我正在研究一个MVC项目，并在Chart.js中生成一个图表 . 我正在尝试制作一个图表，其中标签是个人，然后执行每个状态（每个用户）的计数的堆积条形图，然后覆盖每个用户的总金额的线图 . 以下是从存储过程返回数据时的示例： +-------+---------------------+---------+-------+ | User | Status | Dolla... -
0 votesanswersviews
Chart.js - 条形图上的水平线干扰工具提示
我正在使用Chart.js 2.6并且我已经实现了horizontalLine插件来显示条形图上的平均值 . 它工作正常，但是当工具提示显示在与线相交的点上时，它部分被水平线本身覆盖 . 我试图弄清楚如何使工具提示在水平线上绘制 . 我理解工具提示是canvas元素的一部分，因此没有z-index属性 . 我怎么能做到这一点？ 这是我用于水平线插件的内容 . var horizonalLinePl... -
81 votesanswersviews
使用chart.js v2删除图表上的图例
我正在使用Bootstrap，JQuery和Chart.js（v2）制作主页 . 我让我的实现使用v1，但最近刚进入Bower并使用它下载了v2 . 我正在制作一个包含饼图的4列网格，但是v2中的缩放对我来说有点令人困惑 . 我希望图表能够快速响应，以便它们可以与平板电脑和智能手机等小型设备一起正确扩展，我的一个问题就是摆脱图表的图例以及将鼠标悬停在我的各个部分上时的悬停信息图表 . index.... -
1 votesanswersviews
自定义角度图表工具提示
我正在使用Angular Chart，我需要自定义工具提示 . 目前饼图上的工具提示显示如下 . 它们也是重叠的 . 我需要显示类似于此的工具提示 . 我怎样才能做到这一点？ -
3 votesanswersviews
部分视图中的多个Chart.js图表互相覆盖
使用Asp.Net MVC，我正在尝试使用chart.js库创建一个在单个页面上显示多个条形图的网页 . 每个图表都有不同的数据，并在其自己的局部视图中创建 . 但是，最后的图表数据不是创建多个不同的图表，而是覆盖页面上的第一个图表，所有剩余的图表显示为空白 . 如下图所示，"Title and Segments"数据和图例覆盖"Producers"数据，&... -
1 votesanswersviews
如何隐藏网格线但在chart.js上显示图例
嗨，我有当前代码显示当前使用chart.js版本2.5的饼图 . https://jsfiddle.net/nLtacgoc/ 1）如何在显示图例的同时隐藏网格线？ 2）目前，从代码中，图表顶部的图例和数据标签仅响应下面的代码，而不是数据集下的标签：这里是否存在问题？ data: { labels: ["Pass", "Retrain", &quo... -
0 votesanswersviews
chart.js 2.0将新属性添加到数据集
我需要添加一个属性到数据集/标签，以便在点击时识别它 . 我尝试过这样的事情： Chart.controllers.customBar = Chart.controllers.bar.extend({ code: null }); 它几乎可以工作，因为我可以看到新的属性“代码”，数据与它相关联，图表背景是可见的但是空的，我的意思是没有来自数据集的数据可见 . 这是我的初始... -
1 votesanswersviews
Chart.JS垂直线与Moment.JS水平轴
有没有办法使用Chart.JS 2.0创建垂直线（事件线，相位变化）？ 我在网上看到了一些例子（see this related question），但是，当使用Moment.js创建水平轴时，不可能给LineAtIndex一个moment.js日期来在该日期创建一条线 . var originalLineDraw = Chart.controllers.line.prototype.draw; ... -
0 votesanswersviews
Chart.js V2格式/样式标签
因此，在chart.js的第1版中，我们可以使用legendTemplates来格式化和设置图表标签出现的位置和方式 . 然而，由于切换到v2我似乎无法找到一个等效的 . 请参阅下面的饼图，其中标签的方式是浓缩的 . 理想情况下，我可以使用一些表单选项来移动，展开或以其他方式设置这些标签的样式 . 这是我使用的旧图例模板的示例 legendTemplate : "<ul clas... -
2 votesanswersviews
在Chart.js v2圆环图工具提示中显示所有值
我正在使用Chart.js v2.5.0 . 当用户将鼠标悬停在圆环图上时，我希望工具提示显示所有值，如下图所示： 这是我目前的代码： var ctx = document.getElementById("chart-area").getContext("2d"); var myPie = new Chart(ctx, { type: 'doughnu... -
0 votesanswersviews
Chart.js 2.7.0 - 如何确保图表区域高度不小于yAxis标签“高度”？
以条形图为例， 我的尝试是执行以下操作（这是在'load'事件中）： window.addEventListener（'load'，function（event）{ var chartAreaHeight = (chartInstance.chartArea.bottom - chartInstance.chartArea.top); var dataWidth = 40; // How ab... -
0 votesanswersviews
Chart.js 2.7.0分组水平条形图，如何获取工具提示以显示一个条形图而不是整个组的数据？
这是一个分组水平条形图： http://jsfiddle.net/jmpxgufu/185/ var ctx = document.getElementById（“myChart”） . getContext（“2d”）; var chart = { options: { scales: { yAxes: [{ barPercent... -
0 votesanswersviews
Chart.js - 在饼图上显示数据标签引出线
我一直在玩Chart.Js，但由于时间限制和个人偏好D3等人的SVG路线，我最努力避免进入Canvas . 我在仪表板页面上混合了一些图表，除了一个问题外，一切看起来都很棒 - 你必须将鼠标悬停在一个饼图段上才能看到底层的％或值 . 对于仪表板视图，我的用户更愿意快速查看段上的一些数据标签 - 与Excel一样 - 可能更容易用图像解释： https://support.office.com/en... -
53 votesanswersviews
Chart.js v2隐藏数据集标签
我有以下代码使用Chart.js v2.1.3创建图形： var ctx = $('#gold_chart'); var goldChart = new Chart(ctx, { type: 'line', data: { labels: dates, datasets: [{ label: 'I want to remove... -
10 votesanswersviews
在Chart.js 2.0中绘制水平线
你能帮我看看如何扩展Chart.js v2.0吗？我需要在图表中绘制一些水平线，类似于：http://jsfiddle.net/vsh6tcfd/3/ var originalLineDraw = Chart.controllers.bar.prototype.draw; Chart.helpers.extend(Chart.controllers.bar.prototype, { draw... -
1 votesanswersviews
chart.js（v2）图例中的返回百分比
Chart.js 2不再返回饼图中图例项目的百分比 . 我将图例存储在名为 #legend 的html中的单独项目中 . 然后我将它的 innerHTML 设置为 myPieChart.generateLegend() . 它返回颜色和名称，但我希望能够覆盖此HTML模板以返回百分比，因此输出看起来像： A B C. 至： A（13％）B（50％）C（37％） 我以前用 legendTe... -
5 votesanswersviews
在Chart.js中向圆环图添加标签会显示每个图表中的所有值
我正在使用Chart.js在我的网站上绘制一系列图表，并且我编写了一个帮助方法来轻松绘制不同的图表： drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, midLabel) { var ctx = ctxElement; var data = { labels: ctxDataLabels, ... -
13 votesanswersviews
如何自定义Chart.js 2.0 Donut Chart的工具提示？
我正在尝试使用Chart.js2中的圆环图显示一些数据 . 我目前的图表如下所示： 我想要的输出必须显示另一个属性，即百分比，如下所示： 我已经阅读了文档，但我无法应对这一点，因为它非常通用，我是JavaScript的新手 . 我的第一个图表的代码如下： const renderCashCurrencyPie = (cashAnalysisBalances) => { if (c...