无法让 Chartist 图例插件工作答案

【问题标题】：Can't get Chartist legend plugin to work无法让 Chartist 图例插件工作
【发布时间】：2017-07-12 07:23:58
【问题描述】：

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

});

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

【问题讨论】：

控制台给出，“TypeError: undefined is not an object (evalating 'Chartist.plugins.legend')”

标签： meteor chartist.js

【解决方案1】：

我没有使用流星，因此您的里程可能会有所不同，但我使用的是 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']
    }) ]

});

【讨论】：

哎呀，对一个没有标记答案的问题的工作代码投了反对票，今天有人脾气暴躁？
声明后tester在哪里使用？
@Gel tester 声明后完全不使用。它只是实例化图例，如果你不这样做，你会得到一个错误。哈克但工作。

【解决方案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/

【讨论】：

谢谢，Khang，虽然这个对象不是必需的，也不能解决问题。
当您提供对象时，您是否看到任何新的错误消息？

【解决方案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

【讨论】：