标签: highcharts-ng
highcharts-ng增长但在flexbox中不缩小
我正在尝试在Flexbox容器中放置一个高图.图表随着容器的增长而增长,但是当容器收缩时它不会收缩.
我的项目使用angularJS和highcharts-ng,虽然我猜测问题在于flexbox本身.至少在Chrome和IE中也是如此.
这是一个说明问题的傻瓜.如果打开嵌入式视图,您会注意到当窗口变宽时,两个图表都会重新调整以适应.但是当你做得更窄时,顶部图表(在弹性箱中)保持不变.
我放入了reflow按钮来广播highcharts-ng的reflow事件,但它似乎没有效果.
我正在寻找一种解决方法或任何仍然允许我使用flexbox的解决方案.
以下是Plunkr的代码.它基于highcharts-ng的作者的另一个插件,解决了引导容器的类似问题.
的index.html
<!DOCTYPE html>
<html ng-app="highChartTest">
<head>
<link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="MyHighChart as c">
<div class="page-container">
<div class="side-panel">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li><button ng-click="onReflowButtonPressed()" class="autocompare">Reflow</button></li>
</ul>
</div>
<div class="main-panel">
<highchart id="highchart01" config="c.config" height="300"></highchart>
</div>
</div>
<highchart id="highchart02" config="c.config" height="300"></highchart>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script data-require="ui-bootstrap-tpls-0.12.0.min.js@*" data-semver="0.12.0" src="https://rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script data-require="highcharts@4.0.1" data-semver="4.0.1" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.0.1/highcharts.js"></script>
<script data-require="highcharts-ng@0.0.9" data-semver="0.0.9" src="https://rawgit.com/pablojim/highcharts-ng/master/dist/highcharts-ng.min.js"></script>
<script src="app.js"></script>
</body>
</html> …推荐指数
解决办法
查看次数
使用HighStocks和highcharts-ng
我正在使用HighCharts的Angular指令,https://github.com/pablojim/highcharts-ng.
但是我想通过设置useHighStocks:true来使用HighStock选项,根据上面的链接应该可以.
当我尝试这个时,图表根本不会加载,但是当它设置为false时工作正常.我甚至试图从官方网站上包含highstock.js但没有运气.
原创jsfiddle:http://jsfiddle.net/pablojim/7cAq3/
我的非工作highstock jsfiddle:http://jsfiddle.net/achronos/7LZv4/1/
$scope.chartConfig = {
options: {
chart: {
type: 'line',
zoomType: 'x'
}
},
series: [{
data: [10, 15, 12, 8, 7, 1, 1, 19, 15, 10]
}],
title: {
text: 'Hello'
},
xAxis: {currentMin: 0, currentMax: 10, minRange: 1},
loading: false,
useHighStocks: true
}
我能做些什么才能让它发挥作用？谢谢
highcharts highstock angularjs angularjs-directive highcharts-ng
推荐指数
解决办法
查看次数
使用angular,highcharts-ng更新图表,高图中的数据
尝试使用angular,highcharts-ng的highcharts指令.https://github.com/pablojim/highcharts-ng
我在更新数据时遇到了一些问题.更新系列值没有问题.但是我无法更新X轴标题.我在这里有一个js-fiddle http://jsfiddle.net/user1572526/3stqK/2/
我的工厂里有chartConfig:
myapp.factory('Chart', function () {
var chartConfig = {
options: {
chart: {
type: 'column'
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
xAxis: [{
categories: ['old bar title', 'old bar title 2 ']
}],
title: {
text: 'Hello'
},
loading: false
}
return chartConfig;
});
然后我在我的控制器中公开它:
myapp.controller('myctrl', function ($scope, Chart) {
$scope.chartConfig = Chart;
最后是一个设置一些新值的函数
$scope.update = function () {
$scope.chartConfig.title.text = "Setting new title"; //Works
$scope.chartConfig.series = [{ //Works
"name": "Updated …推荐指数
解决办法
查看次数
高图-yAxis对数刻度和allowDecimals设置为false似乎没有任何作用
我想防止在已配置的面积图的y轴上显示十进制值。
当我的图表最初显示所有系列显示时，我看到：
But after filtering out some of the series to show, I see the y axis start showing decimal values like so:
My yAxis config is as follows:
yAxis: {
gridLineColor: 'transparent',
allowDecimals: false,
type: 'logarithmic',
minorTickInterval: 1,
lineWidth: 0,
gridLineWidth: 0,
minorGridLineWidth: 0
},
I wondered if this had something to do with being a logarithmic scale, but when I comment out the type option to revert to using a default scale, it makes no difference, I observe …
推荐指数
解决办法
查看次数
在 Highcharts 中对堆积条形图进行分组
我有一种情况，我需要将某些条/列分组为业务需求的逻辑分组。我不在乎它是堆叠的条形图还是堆叠的柱形图，但我需要将某些堆叠组合在一起。仍然需要标记各个堆栈。Highcharts 是我目前的目标，但如果无法实现，我会考虑另一个图书馆的想法。我对通过 plunker、jsfiddle 等的交互式示例非常感兴趣，因此我可以快速确认您提出的想法或在需要时提出智能跟进问题。
我还有一些其他参数：
- 我的 UX 设计师希望条形聚集在一起，这样http://blacklabel.github.io/grouped_categories/ 之类的东西就行不通了。我们正在处理大量数据。
- 我需要能够像使用标准堆叠条一样切换“快乐”和“不快乐”部分。
示例图表
Toyota | ########%% Prius
| ######%% Corolla
|
Honda | #####%%%% Civic
| ###%% Accord
'#' Happy '%' unhappy
更新和回应
帕维？Fus：您是否错过了“列堆叠和分组”
我没有错过你提到的 Highcharts 中的演示。如果您尝试使用该方法来解决我提出的用例，它实际上是行不通的。这是我尝试解决这个问题时的第一个错误。我很难用语言表达，但它基本上允许您将正常的“堆栈”以某种对您有意义的方式拆分成更小的堆栈。我只有两件事，“快乐”和“不快乐”，这对我根本不起作用。如果我错过了一些东西，我很想看看它是如何完成的。
在当前用例中使用“列堆叠和分组”的示例
仅用 2 个数据点将此结果堆叠到标准分组条形图中
Prius | ########
| %%
|
Corolla| #####
| %%
'#' Happy '%' unhappy
如果我有更多的数据点，它会更有帮助，但仍然没有达到我所需要的
Prius | ########$$$
| %%***
|
Corolla| #####$$$
| %%***
'#' Happy '$' Content '*' Distatisfied '%' Unhappy
普朗克
http://plnkr.co/edit/vlsqdqROL3ekEZxO8YLp?p=preview
模拟图像
推荐指数
解决办法
查看次数
HighCharts:如何使用reflow在更改大小后允许自动调整大小
在我们的Angular应用程序中,我们使用highcarts-ng来实现HighCharts.
这是Chart Maximize和Minimize函数,它的工作原理如下:
function expandChartPanel() {
vm.chartMaxed = !vm.chartMaxed;
viewHeader = ScopeFactory.getScope('viewHeader');
highChart = ScopeFactory.getScope('highChart');
var chart = highChart.chartObject;
var highChartContainer = document.getElementById("highchart-container");
var highChartContainerWidth = document.getElementById('highchart-container').clientWidth;
var highChartContainerHeight = document.getElementById('highchart-container').clientHeight;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
if (vm.chartMaxed) {
vs.savedWidth = highChartContainerWidth;
vs.savedHeight = highChartContainerHeight;
console.log('savedWidth = ', vs.savedWidth);
console.log('savedHeight = ', vs.savedHeight);
root.chartExpanded = true;
viewHeader.vh.chartExpanded = true;
highChart.highChartMax = true;
highChartContainerHeight = document.getElementById('highchart-container').clientHeight;
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
highChart.chartConfig.size.width = …推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
Highcharts-ng指令(Angular)不更新
我正在使用highcharts-ng Angular-JS指令在我的页面上绘制图表.
我希望能够更新控制器中的数据,并将这些值反映在图表中.但是,当我使用赋值更新$ scope变量时,例如:
$scope.chartData = [1, 2, 3];
...然后图表不会更新.我可以更新图表的唯一方法是将值推送到数据中,例如:
$scope.chartData.push(4);
...但是这仅在第一次执行时起作用.这是一个JS小提琴,显示我的意思:http://jsfiddle.net/K6hL8/
我是Angular的新手所以我想在我开始指责第三方指令之前检查我的Angular代码是否存在明显的问题(也许我误解了$ scope和双向绑定？).
提前致谢!
编辑:
所以看来(在这个小提琴中:http://jsfiddle.net/K6hL8/),Angular 确实看到了chartData中的变化(我已经把一个带有警报的手表放在上面),但只有在使用"true"调用watch时"为了平等.指令中的所有手表都使用'true',所以我很难过......
javascript highcharts angularjs angularjs-scope highcharts-ng
推荐指数
解决办法
查看次数
Ionic 2 Highcharts
我正在使用Ionic 2框架并希望实现highcharts.
我按照 mharington(离子团队)的步骤https://forum.ionicframework.com/t/ionic-2-and-highcharts-modules/59365/2来设置我的第一张高图.
我得到的错误是我无法导入它但我安装了节点模块
angular2-highcharts include in my node_modules
请帮忙
推荐指数
解决办法
查看次数
加载模块时highcharts组织图抛出错误
我正在尝试使用 highcharts 和 highcharts-angular 生成组织结构图。但是，它在加载组织结构图模块时抛出以下错误。
organization.js:9 Uncaught TypeError: Cannot read property 'prototype' of undefined
at organization.js:9
at e (organization.js:9)
at organization.js:9
at Module../src/app/my-network-chart/my-network-chart.component.ts (my-network-chart.component.ts:9)
at __webpack_require__ (bootstrap:78)
at Module../src/app/app.module.ts (app.component.ts:8)
at __webpack_require__ (bootstrap:78)
at Module../src/main.ts (main.ts:1)
at __webpack_require__ (bootstrap:78)
at Object.0 (main.ts:12)
我做错了什么吗？我正在使用相同的代码来生成网络图表，并且它没有任何问题。我只在组织结构图中面临这个问题。
加载组织图：
import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import HighchartsOrganization from "highcharts/modules/organization";
import HighchartsExporting from "highcharts/modules/exporting";
HighchartsOrganization(Highcharts);
HighchartsExporting(Highcharts);
加载网络图表：在这种情况下没有问题
import { Component, OnInit } from '@angular/core';
import * as Highcharts from …javascript highcharts highcharts-ng angular2-highcharts angular
推荐指数
解决办法
查看次数
饼图与钻取不工作
这是一个吸烟者:http://plnkr.co/edit/S1B9Q9e1yen0QgmKt2ri
var chartConfig = {
title: {
text: 'Number of offers by trend'
},
subtitle: {
text: 'My company'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
options: {
chart: {
type: 'pie'
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
}, …推荐指数
解决办法
查看次数
highcharts-ng 的注意事项
我阅读了更多关于highcharts-ng使用指令的信息，但他们有很多警告。
我有两个选择： - 使用 highcharts.js，然后创建我的指令。- 使用 highcharts-ng 指令。
请问，将 highcharts 指令用于 angular 的最佳方法是什么，如果我使用highcharts-ng，我是否需要一些尚未实现的 highcharts 选项或功能highcharts-ng？
推荐指数
解决办法
查看次数
用逗号打印pie的dataLabels数字
我正在尝试用逗号打印数字（显示9000代表9000），这是我设置格式的方式
format: '{point.name}: {point.y}'
我找不到找到{point.y}返回想要的结果的函数的方法，我尝试过这种方法，format: '{point.name}: '+ numberWithCommas(point.y)但是当然point is not defined我不确定如何处理它，任何方向如何使它起作用？
谢谢
推荐指数
解决办法
查看次数
标签 统计
highcharts ×13
highcharts-ng ×13
angularjs ×7
javascript ×5
angular ×2
charts ×1
css ×1
flexbox ×1
highstock ×1
ionic2 ×1