2

我已经安装了 mfpierre:chartist meteor 包并安装了 mspi:chartistlegend 插件（两个都是大气包）。我有这样的插件：

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() ]

});

图表不会在“插件”键/值对到位的情况下呈现。如果我删除“插件”键/值，图表呈现正常。据我所知，我正在关注文档。欢迎任何帮助。

4

3 回答 3

8

我没有使用流星，因此您的里程可能会有所不同，但我使用的是 Angular2 并且遇到了类似的错误。我的答案是使用图例插件首先对其进行初始化，然后像您所做的那样在 Chartist 插件定义中使用它。这感觉很hacky，但它的工作......

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']
    }) ]

});
于 2017-07-11T23:23:58.123 回答
1

您需要提供一个对象来.legend()包含图例的名称，如下所示：

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'],
        })
    ]
});

更多演示：https ://codeyellowbv.github.io/chartist-plugin-legend/

于 2016-11-28T02:39:29.553 回答
0

您还可以像这样在系列中添加名称：

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] }
]

资源

于 2017-05-04T10:28:01.850 回答