Can't get Chartist legend plugin to work

问题

I've got the mfpierre:chartist meteor package installed and the mspi:chartistlegend plugin for it installed (both atmosphere packages). I've got the plugin like so:

new Chartist.Bar('.ct-chart', {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  series: [
    [1,2,3,4], 
    [1,2,3,4],  
    [1,2,3,4] 
  ]
}, {
  plugins: [ Chartist.plugins.legend() ]

});

The chart won't render with the "plugins" key/value pair in place. If I remove the "plugins" key/value, the chart renders fine. As far as I can tell, I'm following the documentation. Any help welcome.

回答1:

I am not using meteor so your mileage may vary but I am using Angular2 and was getting similar errors. The answer for me was to use the legend plugin to get it initialized first and then use it in the Chartist plugin definition like you have done. This feels hacky but its working...

import * as Chartist from 'chartist';
import * as MyLegend from 'chartist-plugin-legend';

constructor(){
  var tester = new MyLegend(); //without this line, you get 'Chartist.plugins undefined'
}

.... in another method like ngOnInit or something...
new Chartist.Bar('.ct-chart', {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  series: [
    [1,2,3,4], 
    [1,2,3,4],  
    [1,2,3,4] 
  ]
}, {
  plugins: [ Chartist.plugins.legend({
        legendNames: ['Blue pill', 'Red pill', 'Purple pill']
    }) ]

});

回答2:

You need to provide an object to .legend() containing names for the legends, like this:

new Chartist.Line('.ct-chart-line', {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    series: [
        [12, 9, 7, 8, 5],
        [2, 1, 3.5, 7, 3],
        [1, 3, 4, 5, 6]
     ]
}, {
    fullWidth: true,
    chartPadding: {
        right: 40
    },
    plugins: [
        Chartist.plugins.legend({
            legendNames: ['Blue pill', 'Red pill', 'Purple pill'],
        })
    ]
});

More demos here: https://codeyellowbv.github.io/chartist-plugin-legend/

回答3:

You can also add names in the series like this:

series: [
    { "name": "Money A", "data": [60000, 40000, 80000, 70000] },
    { "name": "Money B", "data": [40000, 30000, 70000, 65000] },
    { "name": "Money C", "data": [8000, 3000, 10000, 6000] }
]

Source

来源：https://stackoverflow.com/questions/40834462/cant-get-chartist-legend-plugin-to-work

标签

meteor

chartist.js