在Chartist中,如何向特定图表添加特定选项?

时间:2015-06-03 15:35:59

标签: javascript chartist.js

我有一个页面上有几个图表,使用Chartist。我希望每个图表都有全局选项和个人选项。

var barChartOptions = {
    reverseData: true,
    horizontalBars: true,
}

new Chartist.Bar('#chart1', {
    labels: [1, 2, 3, 4],
    series: [[100, 120, 180, 200]]
},barChartOptions
  // HOW DO I ADD SPECIFIC OPTIONS?!
                );

new Chartist.Bar('#chart2', {
    labels: [1, 2, 3, 4],
    series: [[120, 90, 150, 100]]
},barChartOptions);

new Chartist.Bar('#chart3', {
    labels: [1, 2, 3, 4],
    series: [[180, 190, 90, 110]]
},barChartOptions);

这是jsFiddle展示我的问题。

注意:我是一个JavaScript n00b,所以我可能会遗漏一些非常基本的内容。

1 个答案:

答案 0 :(得分:1)

假设您使用jQuery或Underscore.js,您可以使用extendjQueryUnderscore)函数合并两个对象,以便您可以这样做:

var barChartOptions = {
  reverseData: true,
  horizontalBars: true,
}

new Chartist.Bar('#chart1', {
  labels: [1, 2, 3, 4],
  series: [[100, 120, 180, 200]]
},_.extend({/*specific options*/}, barChartOptions));

这样,传递给Chartist.Bar的对象就是您与全局barChartOptions合并的特定选项。