如何在Chartist中正确显示图例?

时间:2019-06-23 13:14:22

标签: plugins bar-chart data-visualization legend chartist.js

我试图在Chartist中做一个简单的BarChart。我的问题是在图例插件中。它不能正常工作。它总是在图表的错误位置,并且没有显示正确的颜色。我怎么了

JS:

  labels: ['2000', '2004', '2006', '2008','2009','2010','2012','2013','2014','2015','2016','2017','2018'], //Beschriftung x-Achse
  series: [
    {"name": "Katzen", "data":[6.8, 7.3, 7.8, 8.2, 8.2, 8.2, 12.3, 11.5, 11.8, 12.9, 13.4, 13.7, 14.8]},        // Daten y-Achse 1. Säule
    {"name": "Hunde", "data":[5, 5, 5.3, 5.5, 5.4, 5.3, 7.4, 6.9, 6.8, 7.9, 8.6, 9.2, 9.4]},                   // Daten y-Achse 2. Säule
    {"name": "Kleintiere", "data":[4.8, 5.9, 6.3, 6.2, 5.6, 5.3, 7.6, 6.1, 5.9, 5.1, 5, 6.1, 5.4]},
    {"name": "Ziervögel", "data":[4.9, 4.6, 3.8, 3.4, 3.4, 3.5, 3.7, 3.4, 4, 4.2, 4.6, 5.3, 4.8]},
    {"name": "Tiere im Aquarium", "data":[3, 1.9, 1.95, 2, 2, 2, 2.3, 2, 2.1, 2, 2, 2.1, 1.9]},
    {"name": "Tiere im Gartenteich", "data":[0, 1.2, 1.4, 2.3, 2.1, 2.2, 2.6, 1.7, 1.8, 1.6, 1.6, 1.6, 1.5]},
    {"name": "Tiere im Terrarium", "data":[0, 0.4, 0.4, 0.4, 0.4, 0.4, 0.8, 0.8, 0.8, 0.7, 0.7, 0.8, 1]}
]

},{


plugins: [
    Chartist.plugins.legend({})
    ],

    width: '100%',
    height: '100%',
    high: 40,
    low: 0,
    fullWidth: true,
    stackBars:true,
    chartPadding: {
    right: 40}

},

{

  axisY: {
  offset: 200,                                                                          
    labelInterpolationFnc: function(value) {                                            
      return (value + 'Mio.');
    }
  }
}).on('draw', function(data) {                                                          
  if(data.type === 'bar') {
    data.element.attr({
      style: 'stroke-width: 30px'                                                       
});
}


});

0 个答案:

没有答案