Question

我已经安装了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() ]

});

图表不会使用“插件”键/值对进行渲染。如果我删除“插件”键/值，图表呈现正常。据我所知，我正在关注文档。欢迎任何帮助。

Answer 1

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

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

});

Answer 2

您需要为包含图例名称的.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/

Answer 3

您还可以在系列中添加如下名称：

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

无法使Chartist传奇插件正常工作

3 个答案: