Tag: charts

自定义HighCharts – 更改plotLines的高度,默认情况下在特定的x和y处显示标记值

我正在尝试自定义highcharts 1)我需要改变情节线的高度 2)在特定位置显示标记图像本身内的标记值(顶部的白色圆圈内) 这是我迄今取得的成就 Highcharts.setOptions({ global: { useUTC: false } }); /*function updateData(x,y) { var series = chart.series[0]; series.addPoint([x, y], true, true); }*/ var chart; $(function () { var color = ‘#AA34FF’; $(‘#container’).highcharts({ chart: { events: { load: function(event) { _bindCustomEvents(); } }, backgroundColor: ‘transparent’ }, series: [ { color: { linearGradient: { x1: 0, […]

ChartJs折线图在重叠时重新出现毛刺

我有以下代码利用ChartJS库。 /*assume the tags in the right place */ var ctx = $(“#graph1”).get(0).getContext(“2d”); var myChart = new Chart(ctx).Line(graph1Generator(“day”)); …一切正常,但在添加以下事件处理程序以清除并重新绘制具有不同数据的相同图表后,会出现故障。 weekButton.addEventListener(“click”, function(){ ctx.clearRect (0, 0, 300, 300); ctx.canvas.width = 300; ctx.canvas.height = 300; myChart = new Chart(ctx).Line(graph1Generator(“week”)); 这段代码确实使用新数据成功地重绘了图表,但是当我将鼠标hover在它上面时,它会对它应该清除的旧图表做一些非常奇怪的“闪回”。 这让我相信它并没有清除旧的。

Highcharts =>单击折线图时获取点的id

我正在构建折线图,当我点击该线的某个点时,我希望显示一个包含有关此点的一些数据的弹出窗口。 我试图解决的问题是获取id,与此点相关的系列或类似的东西。 这是我的代码: plotOptions: { column: { pointWidth: 20 }, series: { cursor: ‘pointer’, events: { click: function(event) { requestData(event.point); } } } 我试过了 requestData(this.point) , requestData(this.point.id) 但它也行不通。 我们如何得到一个点的id? 非常感谢。

加载后自动放大高图

有谁知道如何在完成加载后自动放大图表的一部分? 我有很多时间序列数据,但最重要的信息是在右边。 我仍然希望所有数据都可用,但只有最近7天的数据放大了。 我想模拟的是用户点击拖动我图表上的最近7天。 因此,如果有人知道如何手动触发该事件,那可能就是我想做的事情。 以下是jsfiddle的示例图表,它具有正常的缩放function: http : //jsfiddle.net/Y5q8H/50/ 我还有一些关于如何做到这一点的其他想法,但我认为我想要的是最好的方法。 其他想法: 1)仅加载最近7天,放置一个假的“重置缩放”按钮,然后加载整个数据系列 2)查看即将推出测试版的姐妹产品StockCharts 。 它似乎有一堆预设范围显示,也很酷。 我不确定我现有的代码有多少我不得不改变。

如何设置ChartJS x轴标题

我们使用Chartjs来绘制图表,但是没有给出x轴标题,这里有y轴标题的解决方案,但是对于x轴我可以添加x轴名称但是无法创建使用y作为this.chart.height将文本与x轴标题重叠,在图表下方的空间正确放置它。 我看过chartjs v2.0,但它也不支持x-Axis标题。

如何标记Google柱形图栏

我正在使用Google Chart API为值创建图表,范围从1到数百万。 问题表示较小值(例如:小于50左右)的条在图上是不可见的,我无法看到哪些值对应于某个x轴。 如果我能以某种方式在条形图上打印y轴值,这将得到解决。但是,我在API文档中找不到任何关于如何做的提及。 这里有类似的问题,但它没有回答我的问题。 在Google交互式条形图中将标签放在内部栏的顶部 还有其他一些超过一年未解决的问题,我希望有人可能已经找到解决方案或解决方法 ,这就是为什么再次提出这个问题。 谷歌可视化:柱形图,简单的问题,但找不到答案 如何在Google Chart API列顶部显示值 你能告诉我如何实现我想要的东西如何自定义这个谷歌条形图? ?

条形图上的jqplot工具提示

我正在使用jquery插件jqplot绘制一些条形图。 在hover时,我想在工具提示中显示栏的刻度及其值。 我试过了 highlighter: { show: true, showTooltip: true, // show a tooltip with data point values. tooltipLocation: ‘nw’, // location of tooltip: n, ne, e, se, s, sw, w, nw. tooltipAxes: ‘both’, // which axis values to display in the tooltip, x, y or both. lineWidthAdjust: 2.5 // pixels to add to the size […]

自定义highcharts工具提示以显示日期时间

我正在开发一个预计会显示此图表的项目: http : //jsfiddle.net/Kc23N/ 当我点击一个点(工具提示)时,我想显示一个可理解的日期,而不是以毫秒为单位的值。 我认为需要改变这段代码: tooltip: { headerFormat: ‘{series.name}’, pointFormat: ‘{point.x} date, {point.y} Kg’, } 我该怎么办? 任何善意的帮助表示赞赏。 谢谢

如何在jqplot饼图上显示工具提示

我有一个带有图例的jqplot饼图,我希望当鼠标hover在馅饼上时,传奇文本会显示为工具提示。 我不知道该怎么做。 有没有人有类似的经验? 示例代码: $(document).ready(function(){ var data = [[‘Heavy Industry’, 12],[‘Retail’, 9], [‘Light Industry’, 14],[‘Out of home’, 16],[‘Commuting’, 7], [‘Orientation’, 9]]; var plot1 = jQuery.jqplot (‘chart1’, [data], { seriesDefaults: { renderer: jQuery.jqplot.PieRenderer, rendererOptions: { showDataLabels: true } }, legend: { show:true, location: ‘e’ } } ); });

使用ChartEditor调整Google可视化的大小

使用谷歌可视化ChartEditor时,是否可以设置图表的宽度和高度? 我要求图表为页面宽度的100%,然后设置高度(以像素为单位),当前我在忽略选项中设置宽度和高度时。 我到目前为止所使用的代码如下: google.load(“visualization”, “1”, { packages: [“corechart”, “controls”, “charteditor”] }); google.setOnLoadCallback(loadEditor); var chartEditor = null; window.onresize = function() { loadEditor(); }; function loadEditor() { var data = google.visualization.arrayToDataTable([@Html.Raw(@ViewBag.ChartData)]); var dashboard = new google.visualization.Dashboard(document.getElementById(‘dashboard_div’)); var rangeSlider = new google.visualization.ControlWrapper({ ‘controlType’: ‘CategoryFilter’, ‘containerId’: ‘filter_div’, ‘options’: { ‘filterColumnLabel’: ‘VAR1’, ‘ui’: { ‘label’: ‘Years’ } } }); var […]