天道酬勤,学无止境

charts

How to implement grouped chart of stacked chart and bar chart using d3js v4

I want to implement a grouped chart, which will have stacked chart and a bar chart. I am new to d3.js charts and little confused about the approach to build mixed kind of chart. I have tried to built a stacked chart and painted bar chart, here I have some doubts that these two charts are not grouped very well. Please find my approach in the below fiddle. Demo Fiddle

2021-09-24 13:28:47    分类:问答    javascript   html   css   d3.js   charts

避免 d3js 轴中的重复日期(Avoid duplicate dates in d3js axes)

问题 我有很多动态生成的图表。 对于某些图表,日期彼此接近,因此轴标签会重复 例子: 使用的日期格式: d3.time.format("%d-%b-%y") 是否有内置的方法来避免标签重复? 或者是否有一个很好的通用程序可以避免这种重复? 请注意,我的图表也具有缩放功能,并且传入的数据是动态的,因此我无法输入“ticks”或“tickValues”的硬编码值。 动态生成刻度或刻度值,可能是要走的路。 回答1 谢谢@Lars Kotthoff 的帮助。 这是基本的解决方案: var ticks = scale.ticks(userSpecifiedTicks); var nonDuplicateTickValues = []; var tickAlreadyExists = function(tickValIn) { for(var i=0;i<nonDuplicateTickValues.length;i++) { var t = nonDuplicateTickValues[i]; var formattedTickValIn = formatter(tickValIn); var formattedTickVal = formatter(t); if(formattedTickValIn == formattedTickVal) {return true;} } return

2021-09-24 07:17:16    分类:技术分享    d3.js   charts   axis-labels

使用鼠标滚轮放大(Zooming in using Mouse Wheel)

问题 所以我有一个图表,有时这个图表在 Y 值方面会达到 1000,而且很难看到单个点/轴的截距。 这将允许我单击并拖动一个区域进行放大,但是这会破坏 X 和 Y 值/间隔,并且还会向图形中添加我不想要的滚动条! Chart1.ChartAreas(0).CursorX.IsUserSelectionEnabled = True Chart1.ChartAreas(0).CursorY.IsUserSelectionEnabled = True 有没有办法使用鼠标滚轮来实现这一点并单击拖动而不是使用滚动条? 回答1 我在另一个问题中找到了答案在 Microsoft Chart Control 中启用鼠标滚轮缩放 但它是在 c# .. 我把它转换成 vb.net Private Sub growthChart_MouseEnter(sender As Object, e As EventArgs) Handles growthChart.MouseEnter growthChart.Focus() End Sub Private Sub growthChart_MouseWheel(sender As Object, e As MouseEventArgs) Handles growthChart.MouseWheel Try With growthChart If (e.Delta

2021-09-24 06:16:08    分类:技术分享    vb.net   graph   charts   controls   zooming

Highcharts - Combine & superimpose columns

I found tutorials and answers about how to combine charts, superimpose them, but none about both at the same time. Here is a picture of what I mean: I tried some stuff, here is what I have done so far : http://jsfiddle.net/8vCEs/37/ var chart; $(document).ready(function () { chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'column' }, tooltip: { shared: false }, plotOptions: { column: { stacking: 'normal' } }, series: [{ name: '1', data: [100], grouping: false, }, { name: '2', grouping: true, stack: 1, data: [30], }, { name: '3', grouping: true, stack: 1, data: [20] }] });

2021-09-24 05:30:19    分类:问答    javascript   jquery   charts   highcharts   center

如何从最左侧开始获取谷歌图表 X 轴点(How to get google charts X-Axis points starting at the left most point)

问题 我在我的应用程序中使用 Google API 制作图表。 为此,我在同一页面中使用了多个图表。 我的问题是给图表填充,如果我给更多的点,图表区域在那个 div 中占据更多的空间,如果我只给几个点,图表区域占据更少的空间并且居中对齐。 第一个图表从左到右正确对齐,带有两个点的第二个图表居中对齐。 如何使所有图表从最左到最右点具有相同的对齐方式,就像第一个图表一样? 这是我的代码。 <script> var data1 = google.visualization.arrayToDataTable([ ['year', 'Cats'], ['2009', 20], ['2010', 23], ['2011', 34], ['2012', 43] ]); var data2 = google.visualization.arrayToDataTable([ ['year', 'Cats'], ['2007', 20], ['2008', 23] ]); var options = { pointSize: 5, width: 211, height: 90, backgroundColor: '#ffffff', chartArea: { left: 10, top: 10, width: 195, height: 56 }, legend: {position: 'none'}

2021-09-24 05:23:17    分类:技术分享    javascript   css   charts   google-visualization   padding

Series lines not showing up properly in JFreeChart

I am working with this plot where the data and the lines are not showing properly. When it has more data and while zooming it with mouse wheel, the lines are not showing properly. I tried placing polygon box around series line thinking that the series will show up like the XYTextAnnotation, but it's not working. import java.awt.Color; import java.awt.BasicStroke; import org.jfree.chart.ChartPanel; import org.jfree.chart.JFreeChart; import org.jfree.chart.annotations.*; import org.jfree.data.xy.XYDataset; import org.jfree.data.xy.XYSeries; import org.jfree.ui.ApplicationFrame; import org.jfree

2021-09-24 04:32:25    分类:问答    java   r   charts   jfreechart

How to add a vertical line in a horizontal bar chart?

I have to following chart with dates as the x-Axis: How can a white, vertical line on top of the bars chart be displayed at today's date?

2021-09-24 03:34:48    分类:问答    excel   charts

Chart.js line 2686 Error

I want lineChart of Chart.js in my sinatra application. But firefox console says `TypeError:this.scale is undefined(Chart.js:2686)` and, lineChart is not displayed.I wrote following code. @hello.erb <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> <script src="Chartjs/Chart.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> </head> <body> <canvas id="line" height="450" width="600"></canvas> </body> </html> @script.js $(function(){ var lineChartData = { labels : ["hoge","fuga"]

2021-09-24 03:01:15    分类:问答    javascript   canvas   charts   sinatra   erb

How to spread columns of ASP.NET Column chart over relevant intervals of X-axis?

I am trying to create a chart like this: I am almost there but I am having issues with the columns not spreading over their respective ranges instead they are concentrated over the first range of my chart. How to resolve this? I tried: Extracts from aspx: <asp:Chart ID="Chart2" runat="server" BackColor="DarkSlateBlue" BackGradientStyle="LeftRight" BorderlineWidth="0" Height="440px" Palette="SeaGreen" PaletteCustomColors="24, 0, 0" Width="560px" BorderlineColor="128, 128, 255" OnLoad="Chart2_Load"> <Titles> <asp:Title Name="DefaultTitle" Font="Trebuchet MS, 15pt, style=Bold" Text = "Students

2021-09-24 00:52:13    分类:问答    c#   asp.net   sql-server-2008   stored-procedures   charts

How to create Charts using c# Bot Framework?

I am trying to create some charts(line graph etc.,) in a bot. I have the data available from an online source (finance.Yahoo.com) I am not sure what library I should be using for this purpose 1. What chart library? 2. What type of Card (Hero Card, Adaptive Card ...) should I use? 3. My current solution which is connecting to external site (Yahoo) is a web api and I am using C# bot framework? Could anyone share an example on how can I achieve this? I have tried to use UI.Visualization.Chart library but I wasn't successful in getting the solution. Hence I am looking for some help in this area

2021-09-24 00:45:51    分类:问答    c#   charts   botframework