Tag: chart.js

如何在Chart.js中为条形图和折线图添加第二个Y轴？

我试图在Chart.js中添加一个双Y轴进行两次数据集比较。 我目前正在使用Leigh Quince的LineBar扩展，这是在这里找到的答案： Chart.js如何获得组合条形图和折线图？ 大约一年前还有一个针对双Y轴的解决方案，但仅用于折线图，并且它与Nick的主人不同步。 似乎有Line和Bar图表，或Double-Y但不是两者。 我的问题是我需要将TSAT％（饱和度水平），左Y轴，折线图表示为铁蛋白剂量水平，右Y轴条形图。 这就是我需要的样子： （似乎Stackoverflow已经改变了它的颜色，希望你仍然可以读取Y轴刻度） 如果有人可以使用解决方案，我将非常感激。 当前代码： var data = { labels: [“Jun 2013”, “Jul 2013″,”Aug 2013″,”Sep 2013″,”Oct 2013″,”Nov 2013″,”Dec 2013”, “Jan 2014”, “Feb 2014”, “Mar 2014”, “Apr 2014”, “May 2014”], datasets: [ { label: “TSAT”, type: “line”, fillColor: “transparent”, strokeColor: “#a33a59”, pointColor: “#a33a59”, pointHighlightStroke: “#FFF”, data:[33,32.9,32.9,33.2,33.2,33.2,32.7,32.9,32.9,32.7,32.7,32.7] }, { label: “Ferritin”, […]

删除图表js折线图中的垂直线

我正在使用Chart.js生成地图并在很大程度上对其进行了定制。 但无论如何我都无法移除垂直网格线。 有人遇到过这样的情况吗？ 非常感谢。 JavaScript的 var ChartDataHome = { labels: [“”, “NOV”, “DEC”, “JAN”, “FEB”, ], datasets: [{ strokeColor: “rgba(255.255,255,1)”, pointColor: “rgba(159,209,154,1)”, pointStrokeColor: “rgba(255,255,255,1.00)”, data: [4.5, 8.8, 7.5, 9.5, 7.8, 9] }, ] }; var step = 2; var max = 10; var start = 0; ChartOptionsHome = { scaleLabel: “”, pointDot: false, bezierCurve: false, […]

如何使用Chart.js显示折线图数据集点标签？

我有一个设计要求，要显示包含5个趋势数据数据集的折线图。 沿着笔划线的每个数据值需要在其各自的数据点处显示数据值标签。 不幸的是，我无法在Charts.js中找到满足此要求的选项。 有没有可以帮助我的解决方法？ 我也把这个发布在小提琴上： http ： //jsfiddle.net/s9eannLh/ 非常感谢！ var data = { labels: [“”,”Jun 2013″,”Jul 2013″,”Aug 2013″,”Sep 2013″,”Oct 2013″,”Nov 2013″,”Dec 2013″,”Jan 2014″,”Feb 2014″,”Mar 2014″,”Apr 2014″,”May 2014″], datasets: [ { label: “hemoglobin_1”, title: “test”, fillColor: “transparent”, strokeColor: “#65204c”, pointColor: “#65204c”, pointHighlightStroke: “#FFF”, data: [null,5.7,5.7,5.8,5.7,5.8,5.7,5.9,6.7,6.7,6.5,6.4,6.4] }, { label: “hemoglobin_2”, fillColor: “transparent”, strokeColor: “#ed7141”, pointColor: “#ed7141”, pointHighlightStroke: […]

Chart.js在饼图上显示标签

我最近将我的charts.js库更新为最新版本（2.5.0）。 此版本不显示图表上的标签。 我有一个在提琴手上工作的例子： http ： //jsfiddle.net/g6fajwg8 。 但是，我在示例中完全定义了我的图表，但仍无法看到图表上的标签。 注意：在Google和Stackoverflow上有很多这样的问题，但大多数问题都与之前的版本有关。 var config = { type: ‘pie’, data: { datasets: [{ data: [ 1200, 1112, 533, 202, 105, ], backgroundColor: [ “#F7464A”, “#46BFBD”, “#FDB45C”, “#949FB1”, “#4D5360”, ], label: ‘Dataset 1’ }], labels: [ “Red”, “Green”, “Yellow”, “Grey”, “Dark Grey” ] }, options: { responsive: true, legend: { […]

使用json响应绘制chart.js中的折线图

$(function() { $.ajax({ type: “POST”, url: “BillnAmount”, cache: false, dataType: ‘json’, success: function(data) { console.log(data); var data = { labels: [“January”, “February”, “March”, “April”, “May”, “June”, “July”], datasets: [ { label: “My First dataset”, fillColor: “rgba(220,220,220,0.2)”, strokeColor: “rgba(220,220,220,1)”, pointColor: “rgba(220,220,220,1)”, pointStrokeColor: “#fff”, pointHighlightFill: “#fff”, pointHighlightStroke: “rgba(220,220,220,1)”, data: [65, 59, 80, 81, 56, 55, 40] }, […]

将可编辑文本框添加到图表中的特定数据点

我正在尝试实现可编辑的文本框（在chartjs或fusion图表中的解决方案很好）。 尝试在使用触发器捕获数据点上的用户点击事件的fusioncharts中。 从fusionchart示例这里检查jsfiddle … [ dataPlotClick ] 1事件。 但是，目标是将外部文本框显示为模式forms或其他内容，记录用户注释，然后将它们存储在mysql数据库中。 最后，使用新注释更新工具提示以重新加载图表数据。 任何输入都有帮助。 以下是我所拥有的。 My first chart using FusionCharts Suite XT FusionCharts.ready(function(){ var fusioncharts = new FusionCharts({ type: ‘msline’, renderAt: ‘chart-container’, width: ‘500’, height: ‘300’, dataFormat: ‘json’, dataSource: { “chart”: { “paletteColors”: “#0075c2,#1aaf5d”, “bgcolor”: “#ffffff”, “showBorder”: “0”, “showShadow”: “0”, “showCanvasBorder”: “0”, “usePlotGradientColor”: “0”, “legendBorderAlpha”: “0”, “legendShadow”: “0”, […]

Chart.js – 根据某个y值绘制水平线

我指的是Stack Overflow上的这篇文章： Chart.js – 绘制水平线 本文中提到的代码根据图表上某点的位置创建一条水平线。 所以说我在42点和44点有一个点，然后我可以选择在其中任何一个上加一条线。 但是在我目前的场景中，我想要一个43点（例如），并且这很难绘制，因为此点没有“最高值”（其他两个在Chart.js中计算出最高值）。 有没有办法在Chart.js中执行此操作，例如，通过计算该行所需的“最高值”？ 在我的实际图表中，我不会有像42和44这样的点，我可以平均找到43，我会有更像39和55的东西，其中我需要在43处绘制一条线。

在ChartJs中的Linechart点内添加图像

我正在使用ChartJs开发一个项目。 我想在line chart添加图标图像而不是points 。 我附上了一张图片，其中我展示了上述要求。 在该图像中，有一个ChartJs图像和一个参考图像。 我想在ChartJs的折线图中添加一个与参考图像（太阳和云图标）完全相同的图像。 ChartJs有可能吗？

chart js tooltip如何控制显示的数据

我正在使用chart.js插件并通过栏视图使用组图表。 当我hover一组酒吧时，我可以看到一个工具提示，向我显示这些酒吧的数据。 但是当我将鼠标hover在条形数据上时，我要更改工具提示以显示我唯一的单个数据。 而我该如何显示不同的数据信息。 jsfiddle的例子 var ctx = document.getElementById(“errorChart”).getContext(“2d”); var data = { labels: [“January”, “February”, “March”, “April”, “May”, “June”, “July”], datasets: [ { label: “My First dataset”, fillColor: “rgba(220,220,220,0.5)”, strokeColor: “rgba(220,220,220,0.8)”, highlightFill: “rgba(220,220,220,0.75)”, highlightStroke: “rgba(220,220,220,1)”, data: [65, 0, 0, 0, 0, 0, 0] }, { label: “My Second dataset”, fillColor: “rgba(151,187,205,0.5)”, strokeColor: “rgba(151,187,205,0.8)”, highlightFill: […]

如何在charts.js中旋转饼图？

看起来像charts.js的饼图是通过在圆圈的上半部分采用垂直半径，然后从那里顺时针移动来绘制的。 这在大多数情况下效果很好，但是对于只有2个类别的饼图，如果它可以旋转以使切片居中，那将会很好，如下所示： 旋转的计算方法是将360的百分比除以2. (.14*360)/2 = 25.2度，如果我可以申请 transform: rotate(-25.2deg); 到圆圈我会很好。 由于charts.js将它放在canvas上（而不是 ），我不知道如何对它应用任何转换。 不确定是否相关，但这是我的图表代码： HTML JS openRate = [ { value: 488, color: “#FF9030”, highlight: “rgba(255, 144, 48, 0.44)”, }, { value: 3475, color: “#008DB7”, highlight: “rgba(0, 141, 183, 0.82)” } ]; var ctx=document.getElementById(‘canvas’).getContext(“2d”); var chart=new Chart(ctx).Pie(openRate); 还有一个小提琴： http ： //jsfiddle.net/msy6kf3a/