How to color legend in angular-chart.js

问题

the very last example in this section of angular-chart.js documentation shows a pie/polar chart example with a colored legend. Obviously, this should be my answer, but:

I used this code for my frontend (which is pretty much the same as in the doc):

<canvas id="base" 
        class="chart-pie" 
        chart-type="type" 
        chart-data="data" 
        chart-labels="labels" 
        chart-legend="true">
</canvas>

I did also use the same data and labels. But unfortunately the legend of the rendered plot consists out of list-bullet-points and the labels (see enclosed image) This happens to all charts I create with this library. Does anybody know this behavior or (even better) any solution for that problem?

I am using angular/typescript and bound the DefinitelyTyped file to my project.

EDIT: I am not willing to define any colors by myself! The chart gets its own colors by itself. We should leave it like that.

回答1:

It seems you are missing the reference to a style sheet in your html file. angular-chart.css

回答2:

I did the following:

$ git clone https://github.com/jtblin/angular-chart.js.git
$ npm install
$ bower install

Then open angular-chart.js\examples\charts.html

Change

<canvas id="pie" class="chart chart-pie chart-xs" chart-data="data" chart-labels="labels"></canvas>

<canvas id="pie" class="chart chart-pie chart-xs" chart-data="data" chart-labels="labels" chart-legend="true"></canvas>

And the chart has a legend with colors. Your CSS seems to be different than the one in official distribution.

来源：https://stackoverflow.com/questions/33614469/how-to-color-legend-in-angular-chart-js

标签

angularjs

charts

typescript

chart.js