Tag: highcharts

如何为不规则时间图创建平均线？

我正在使用HighCharts构建不规则的时间图，目前看起来像这样： 而且我想知道是否有可能为三条（或可能更多的未来）线创建一条“平均”线。 它将开始跟随蓝线，然后更接近1月中旬的绿线等。 目前我正在使用的代码如下： $(‘#chart’).highcharts({ chart: { type: ‘spline’ }, title: { text: ” }, xAxis: { type: ‘datetime’ }, yAxis: { title: { text: ” } } series: [{ name: ‘Line 1’, data: [ [Date.UTC(2014,0,16), 173.33], [Date.UTC(2014,0,23), 163.33], [Date.UTC(2014,0,30), 137.67], [Date.UTC(2014,1,6), 176.33], [Date.UTC(2014,1,13), 178.67], [Date.UTC(2014,1,27), 167.33], ], color: ‘purple’ }, { name: ‘Line 2’, […]

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

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

使用Highcharts调整高度

我有一个Highchart，当窗口改变大小时，它会大大调整宽度。 但不是高度。 我尝试了这个设定的图表大小，但它不能正常工作。 当窗口改变大小时，有没有其他方法可以自动更改高度？ 这是我输出的css代码。 我有一个Jquery UI选项卡，另一个选项卡显示数据表 #output-container { float: right; display: inline; position: absolute; right: 10px; left: 400px; top:120px; overflow-y: auto; } 这是我对chartdiv的css： #chartContainer{ margin: auto; } 这是js Chart函数： function qchart(){ chart = new Highcharts.Chart({ chart: { renderTo: ‘chartContainer’, type: ‘column’, spacingBottom: 3, //height: (screen.availHeight)-500, marginRight: 30, marginBottom: 30, reflow: true }, //etc.. }; […]

向下钻取多个级别的Highchart

我们喜欢在Highchart中的多个级别上钻取。 Highchart中是否有一个例子？ 目前使用的代码： $(div).highcharts({ chart: {type: ‘column’}, credits: {enabled: false}, title: {text: title}, xAxis: { categories: [ ‘Instroom’, ‘Rijdend’, ‘Úitstroom’ ] }, yAxis: {title: {text: ytitle}}, legend: {enabled: true}, plotOptions: {series: { borderWidth: 1, dataLabels: {enabled: true,}}}, series: first, drilldown: { series: drillDownObject(second) } });

将mysql结果集转换为要输入HighCharts的（名称，数据）对象

我正在使用HighCharts条形图将mysql结果集中的数据绘制成条形图。 现在我的查询的结果集如下： Name Expense —————– July 700.0000 August 450.0000 September 1700.0000 HighCharts的series属性需要以下格式的数据来绘制图形 [ {name:”July”,data:[700.0000]}, {name:”August”,data:[450.0000]}, {name:”September”,data:[1700.0000]} ] 所以我想到使用json_encode($row)我的结果集转换为JSON对象。 但我得到以下输出： [{“name”:”July”,”data”:”700.0000″}, {“name”:”August”,”data”:”450.0000″}, {“name”:”September”,”data”:”1700.0000″}] 释疑： 有没有办法以与HighCharts的系列属性所需的格式完全相同的格式获取/转换结果集？ 我也可以使用在php块中创建的对象，直接进入javascript？ 假设我从结果$jsonNameData创建了一个对象$jsonNameData 。 然后我可以在javascript中使用它 series: 编辑： 通过执行以下操作，我能够解决Q1： $count = 0; $strSeries = “[“; while($r = mysql_fetch_assoc($result)) { if($count == 0){ $strSeries .= “{name:'” . $r[‘name’] . “‘,”; $strSeries .= “data:[” . […]

使用ajax / json和PHP的Highcharts数据系列问题

这是我在这里的第一个请求，我已经阅读了很多关于同一问题的其他相关post，但我仍然陷入困境，而且我的智慧结束了…所以任何帮助都非常感谢！ 我在Page1.php上有以下Highcharts对象，我在页面加载时使用AJAX从Page2.php获取数据，以及更改下拉选项时。 （为便于阅读而截断）： $(document).ready(function() { var e = document.getElementById(“selOption”); //<— This is the dropdown var domText = e.options[0].text; var domID = e.options[e.selectedIndex].value; var options = { chart: { renderTo: 'linechart', type: 'line' }, title: { text: 'Title for ' + domText }, subtitle: { text: '' }, xAxis: { type: 'datetime', dateTimeLabelFormats: { month: '%b […]

Highcharts不适合Bootstrap 3模态体

如何使用Bootstrap 3模态拟合并制作高图表图表？ 看起来图表独立于页面的CSS，但我不确定。 ×Close Assortment Analysis Close $(function () { $(‘#container’).highcharts({ chart: { type: ‘column’ }, title: { text: ‘Stacked column chart’ }, xAxis: { categories: [‘Lazada’, ‘Competitor 1’, ‘Competitor 2’, ‘Competitor 3’, ‘Competitor 4’] }, yAxis: { min: 0, title: { text: ‘Price Range’ } }, tooltip: { pointFormat: ‘{series.name}: {point.y} ({point.percentage:.0f}%)’, shared: true […]

使用ajax json数据创建高清

我正在尝试使用mysql脚本检索的mysql数据在页面中创建一个简单的图表 我不明白如何将ajax调用与图表所需的数据集成。 我不太了解各种图表插件，让我的生活变得轻松，目前正在试用高级图表。 我的php脚本返回以下json： [{“name”:”golfers”},{“data”:[5.7879,6.6286,6.1724,5.3125,7.1481,6.1333,4.5769]}] 我的图表脚本是： $(function () { visitorData(function(data) { console.info(data); $(‘#chart1’).highcharts({ chart: { type: ‘column’ }, title: { text: ‘Average Visitors’ }, xAxis: { categories: [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’, ‘Sunday’] }, yAxis: { title: { text: ‘Number of visitors’ } }, series: data, }); }); }); 我的函数来进行ajax调用： $.ajax({ url: ‘/visitdata’, type: […]

隐藏Highcharts和jQuery中的_groups_系列：如何获得可接受的性能？

我正在使用Highcharts来表示时间序列组。 因此，从同一个体收集的数据点通过线连接，并且来自属于同一组的个体的数据点共享相同的颜色。 Highcharts图例显示了每个单独的时间序列而不是组，而且我有超过一百个时间序列，以这种方式隐藏和显示数据是丑陋和不切实际的。 相反，我制作了按钮并使用jQuery将它们与在时间序列中搜索匹配颜色的函数相关联，并切换每个匹配系列的可见性。 以下是一个包​​含小数据集的示例： http ： //jsfiddle.net/bokov/VYkmg/6/ 以下是该示例中的系列隐藏function： $(“#button”).click(function() { if ($(this).hasClass(“hideseries”)) { hs = true; } else { hs = false; } $(chart.series).each(function(idx, item) { if (item.color == ‘green’) { if (hs) { item.show(); } else { item.hide(); } } }); $(this).toggleClass(“hideseries”); }); 以上工作。 问题是，我的真实数据可能有超过一百个单独的时间序列，看起来像检查每个系列的颜色真的很慢。 那么，有人能提出一种更有效的方法来解决这个问题吗？ 是否有一些内置的Highcharts方法已经这样做了？ 或者，我可以给jQuery一个更具体的选择器吗？ 我试着深入研究由Highcharts创建的元素，但我无法弄清楚哪些子元素对应于图表中的系列。 谢谢。

highcharts滚动轴

我正在使用下面的条形图。 chart = new Highcharts.Chart({ chart: { renderTo: ‘container’, defaultSeriesType: ‘bar’ }, 我的问题是当负载数据加载到Y轴时，图表正在缩小。 我可以在高图中使用垂直滚动条吗？ 提前致谢，感谢您的帮助。