标签: angular-chart

我已经遵循angular-chart.js文档,并创建了一个图表,但无法使用它渲染图例.我不明白为什么它不起作用.

文档:http
://jtblin.github.io/angular-chart.js/类似的问题:如何在angular-chart.js中为图例着色

<div class="panel-body" ng-controller="CircleCtrl" style="display: block;">
    <div class="chart-container" style="width:400px; height:200px;">
        <canvas id="doughnut"
            class="chart chart-doughnut"
            chart-data="data"
            chart-labels="labels"
            chart-colours="colours"
            chart-legend="true">
        </canvas> 
    </div>
</div>  

我也尝试在控制器中为图例定义一个数组,

$scope.legend = ["complete", "incomplete"]

根据其他SO问题中的接受答案,chart-legend="true"应该足以使其有效.

有没有人有这个库的经验,并知道如何解决这个问题？

我正在我正在进行的项目中使用angular-chartJS,并且我需要为条形图中的每个条形图使用不同的颜色.

帆布:

<canvas id="bar" class="chart chart-bar" data="medal_data" labels="medal_ticks"></canvas>

控制器:

$scope.medal_ticks = ['Gold', 'Silver', 'Bronze', 'Not passed'];
$scope.series = ['Medaljer'];
$scope.medals_colours= ['#087D76', '#B3BC3A', '#38B665', '#8B4A9D'];

$scope.medal_data = ['1', '5', '2', '0'];

我试图将属性添加colours="medals_colours"到我的画布,唯一的问题是它只使用数组中的第一种颜色,我想要的是每种颜色代表每一列.所以,#087D76用于表示Gold,#B3BC3A对Silver等

我有两种类型的图表栏和行.这是我的观点(苗条):

    canvas#line.chart.chart-line(
      ng-if="stateStats == 'global'"
      chart-data="data"
      chart-labels="labels"
      chart-colours="colours"
    )
    canvas#bar.chart.chart-bar(
      ng-if="stateStats != 'global' && data.length != 0"
      chart-data="data"
      chart-labels="labels"
      chart-options="optionsBarChart"
    )

我的颜色选项:

$scope.colours = [{
    fillColor: "rgba(151,187,205,0.2)",
    strokeColor: "rgba(151,187,205,1)",
    pointColor: "rgba(151,187,205,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(151,187,205,0.8)"
  }];

我的问题是我不能改变在折线图上显示数据的颜色.当我想将光标移动到该点时 - 我有错误:

未捕获的错误:无法解析对象的颜色["rgba(151,187,205,1)","rgba(220,220,220,1)"...]我做错了什么？

更新时间2017年6月2日:我们解决了问题,但没有解决这里的答案.如果我发现它,我会尝试添加我们的解决方案.我们还切换到了angular-nvd3哪些用途d3.

编辑1:backgroundColor在选项中添加,仍然无法正常工作.不确定我是否把它放在正确的位置.

在这里使用示例.如何使颜色填充100%？

JS:

$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
$scope.type = 'StackedBar';
$scope.series = ['2015', '2016'];
//$scope.colors = ['#AA1921', '#18AF5C'];
$scope.options = {
    scales: {
        xAxes: [{
            stacked: true,
        }],
        yAxes: [{
            stacked: true
        }]
    },
    title: {
        display: true,
        text: 'My First Bar Chart'
    },
    // added as suggested
    backgroundColor: ['rgba(170, 25, 33, 1)', 'rgba(170, 25, 33, 1)']
};
$scope.data = [
    [65, 59, 90, …

我正在使用Angular-Chart.js的折线图指令(在https://jtblin.github.io/angular-chart.js/#line-chart).

正如您在上面的链接中看到的,折线图是曲线.我不想要曲线,我喜欢直线.如何配置折线图以使其不弯曲.非常感谢你.

我在我的网站上使用angular-chart.js来创建一个饼图,我想自定义图例.默认情况下,图例显示颜色和标签.(如下图所示)我想添加该标签的值/数据,就像它在图表的工具提示中所显示的那样.

这是我的HTML代码:

<canvas id="pie" class="chart chart-pie"
   chart-data="chartData" chart-labels="chartLabels" chart-options="chartOptions">
</canvas>

基于angular-chart.js文档,legend现在是Chart.js选项,因此已删除了chart-legend属性.

这就是为什么,在我尝试添加的JS代码中generateLabels,以防万一我需要自定义图例:

$scope.chartOptions = { 
        legend: {
          display: true,
          labels: {
            generateLabels: function(chart){
              console.log(chart.config);
            }
          }
        }
      };

但每当我添加这些行时,它都不会显示图表.我认为这是一个错误或其他什么.而且我不确定,generateLabels我是否需要正确的选择.

有人可以教我正确的方法来定制传奇,以实现我想要的吗？

提前致谢!

我正在使用角度模块angular-chart.js.它很简单,非常聪明.但我注意到我无法改变图表width和height图表.在某处我读过,我必须按如下方式定义图表的大小:

var vm = $scope;
vm.labels = [];
vm.data = [];

CrudService.getData(selDate).$promise.then(
     function (response) {
       angular.forEach(response, function (val) {
          val.datum = $filter('date')(val.datum, 'dd.MM.yyyy');
          vm.labels.push(val.datum);
          vm.data.push(val.grade);
       });

       vm.dataChart = [vm.data];

       /* This is the important part to define the size */
       vm.options = [
         {
            size: {
               height: 200,
               width: 400
            }
         }
       ];
       /************************************************/
    });

风景:

<canvas id="bar" 
        class="chart chart-bar" 
        chart-data="dataChart"
        chart-labels="labels"
        chart-click="onClick"
        chart-options="options">
</canvas>

有谁知道如何定义width和height在angular-chart.js？

我正在使用 angular-chart.js(0.9.0) 创建条形图。一起使用的 Chart.js 版本是 1.0.2。

不幸的是，在我的图表中，值的范围非常广泛。最高值在 90,000 秒，最低值在 4 秒或 40 秒。由于这样的范围，图表并没有像我希望的那样出现。例如，在下图中，最高值为 42000，最低值为 70。

我想知道我们是否可以在 Math.pow 值中手动设置 Y 轴的比例，即将 y 轴比例设置为 10、100、1000、10000、100000 等等。通过这种方式，我想我将能够在图表中正确覆盖如此高的范围数据。

我尝试使用图表选项并手动设置比例，如下所示。但是，使用它，比例变为 0、100、200、300 等。

            $scope.majorOptions = {
                responsive: false,
                maintainAspectRatio: true,
                scaleOverride: true,
                scaleSteps: 10,
                scaleStepWidth: Math.pow(10,2),
                scaleStartValue: 0
            };  

有没有其他方法可以将 y 轴比例设置为 10 的幂？

或者您是否建议我采用其他任何方法来在图表中捕获这些高范围值。

谢谢。

我正在我的项目中使用谷歌折线图和 angularjs 指令，我正在搜索如何在悬停时获得垂直线，例如谷歌趋势而不是放置固定线，但我找不到如何做到这一点。

这就是我想要尝试做的：

我只是隐藏垂直线，但在鼠标悬停时不显示，这是我对 angular-google-chart 指令的选项

options: {
  vAxis: {
    title: 'My title',
    gridlines: {
      count: 10
    }
  },
  hAxis: {
    title: 'title hAxis',
    gridlines: {
      color: 'transparent'
    }
  }
}

Angular Primeng：错误ReferenceError：未在UIChart.initChart定义图表（chart.js：53）

进口：

"../node_modules/chart.js/dist/Chart.js",

"../node_modules/chart.js/dist/Chart.bundle.js",

"../node_modules/chart.js/dist/Chart.min.js",

"../node_modules/chart.js/dist/Chart.bundle.min.js"

import { Chart } from 'chart.js';

import { ChartModule } from 'primeng/primeng';