jjzjj

javascript - Chartjs 2 - 具有相同 y 轴的同一图表上的堆叠条形图和非堆叠线

我已经开始使用chart.jsv2的最新测试版,因为我需要在同一张图表上绘制包含堆叠条形图和非堆叠折线图的图表。这是我需要的示例:在此图表中,线条未堆叠且全部显示其自然值,但条形图堆叠并显示值的总和(包括一些负值)。我已经设法将两个图表绘制在一起,但到目前为止,我只成功地要么将两个图表堆叠在一起,要么我不得不使用两个单独的y轴,最终有2个刻度。fiddle中有一个单独的y轴示例:yAxes:[{stacked:false,ticks:{beginAtZero:true}},{id:"bar-y-axis",stacked:true,ticks:{beginAtZero:true},ty

javascript - ChartJS : datalabels: show percentage value in Pie piece

我有一个带有四个标签的饼图:vardata=[{data:[50,55,60,33],labels:["India","China","US","Canada"],backgroundColor:["#4b77a9","#5f255f","#d21243","#B27200"],borderColor:"#fff"}];使用chartjs-plugin-datalabels插件,我想用下面的代码在每个Pieblock中显示百分比值:formatter:(value,ctx)=>{letdatasets=ctx.chart.data.datasets;if(datasets.indexO

javascript - 在 ChartJS 中使 x 标签水平

如上图使用ChartJS1.0.1绘制折线图。如图所示,尽管有足够的空间,但x轴上的标签不是水平的。我怎样才能让它水平?题外话,注意到y标签,有1-2px被剪掉了。如何解决? 最佳答案 如果您使用的是chart.js2.x,只需在刻度选项中设置ma​​xRotation:0和minRotation:0。如果您希望它们垂直,请改为设置ma​​xRotation:90和minRotation:90。如果您想要所有x标签,您可能需要设置autoSkip:false。下面是一个例子。varmyChart=newChart(ctx,{type

javascript - 在工具提示中显示标签但不在 chartjs 折线图的 x 轴中显示标签

我目前在chart.js中使用折线图,标签集如下所示["January2015","February2015","March2015","April2015","May2015年”,“2015年6月”]。我希望相关标签显示在图表的工具提示中,但只希望每个交替标签显示在图表的x轴上以防止拥挤。有什么办法可以实现吗?我目前正在用“”替换我数组中的每个第二个值,但是虽然这消除了我的x轴上的拥挤,但它不符合我在工具提示中显示标签的要求。 最佳答案 只需扩展折线图并在初始化后替换您不需要的xLabelChart.types.Line.exte

javascript - 在 Chartjs 中显示 JSON 数据

我正在尝试使用ChartJS使用来self的JSON文件的动态生成的数据点创建一个表。我的代码逻辑如下所示:vardatapart;for(i=0;i同时我的JSON文件看起来像这样:{"jsonarray":[{"name":"Joe","age":12},{"name":"Tom","age":14}]}config变量包含ChartJS的配置设置,包括设置数据点。当加载到ChartJS中时,config提供显示我的图表所需的信息。无论如何,我的想法是使用变量datapart作为使用我的for循环附加数据集的方法。不幸的是,代码没有产生任何结果。我知道我附加变量的方法有问题,但不确

javascript - react-chartjs-2 状态更新时不更新图形

我正在创建一个仪表板应用程序,它从端点获取数据并使用setState方法将端点返回的JSON中的变量分配给状态变量。当我更改状态时,某些组件(如“react-svg-gauge”)将更新,但“react-chartjs-2”不会更新。下面的代码是我的状态如何在我的实际应用程序中变化的示例。此示例将在chrome开发人员控制台中显示状态变量的正确值,但不会相应地更新DOM。importReact,{Component}from'react';import{Doughnut}from'react-chartjs-2';classDoughnutExampleextendsComponent

javascript - 使用 Javascript 在 chartjs 中动态更新图表的选项

我已经创建了一个能够在chartjs中成功更新其数据的折线图,我也在尝试动态更改选项值。更具体地说,我希望能够改变规模。我想避免每次需要更新时都重新创建图表。有没有办法动态更新选项,例如:myLiveChart.options.scaleStepWidth=10;myLiveChart.update();注意:我也尝试过以下方法:myLiveChart.scaleStepWidth=10;还尝试了myLiveChart.render();而不是更新,但似乎没有任何效果。这是一个说明问题的fiddle:http://jsbin.com/yaxafehixe/1/edit?html,js,

javascript - ChartJS Canvas 在 IE、Safari 和 Firefox 中不显示 rgba 颜色

我正在使用ChartJS来显示一些数据,但它没有在IE、Firefox和Safari中正确呈现Canvas元素。我的猜测是背景颜色属性缺少其他浏览器使用的任何前缀,因为它在Chrome中工作正常。还有其他人遇到过这个问题吗?Chrome:Firefox、Safari和IE:代码:window.onload=function(){varctx=document.getElementById("canvas");varmyChart=newChart(ctx,{type:'line',data:{labels:["Jan","Feb","Mar","Apr","May","Jun","Ju

javascript - Chartjs 条形图图例

我在使用chartjs创建的条形图上显示图例时遇到问题。该文档讨论了一个图例模板,但我似乎找不到一个很好的例子来说明如何将其实现到图中。下面是我用来生成图表的代码。 varrandomScalingFactor=function(){returnMath.round(Math.random()*100)};varbarChartData={labels:["Item1","Item2","Item3","Item4","Item5","Item6","Item7","Item8","Item9","Item10","Item11","Item12","Item13","Ite

javascript - ChartJS 中的虚线

我正在使用Chart.js中的图表创建我的图表,我想做的是在同一张图表上有2条水平线,但其中一条应该是虚线。我试图在谷歌上找到解决方案但没有成功。你知道怎么做吗?提前致谢 最佳答案 您可以为特定数据集使用border-dash属性。您可以指定borderlength&spacing.例如borderDash:[10,5]varctx=document.getElementById("myChart");varmyChart=newChart(ctx,{type:'line',data:{labels:["Label1","Label