1

我正在尝试让数据点为条形图工作，我找到了折线图的插件，但无法让它在条形图上工作，有人可以帮忙吗？数据点应显示在条形上方。https://jsfiddle.net/x79b1m2w/1/ 

<div class="ct-chart ct-golden-section" id="chart1"></div>
<div class="ct-chart ct-golden-section" id="chart2"></div>

<script>
new Chartist.Bar('#chart1', {
  labels: ['M', 'T', 'W', 'T', 'F'],
  series: [8, 19, 24, 37, 12]
}, {
  distributeSeries: true  
});

new Chartist.Line('#chart2', {
  labels: ['M', 'T', 'W', 'T', 'F'],
  series: [
    [12, 9, 7, 8, 5]
  ]
}, {
  plugins: [
    Chartist.plugins.ctPointLabels({
      textAnchor: 'middle'
    })
  ]
});
</script>
<script>
(function(window, document, Chartist) {
  'use strict';

  var defaultOptions = {
    labelClass: 'ct-label',
    labelOffset: {
      x: 0,
      y: -10
    },
    textAnchor: 'middle',
    labelInterpolationFnc: Chartist.noop
  };

  Chartist.plugins = Chartist.plugins || {};
  Chartist.plugins.ctPointLabels = function(options) {

    options = Chartist.extend({}, defaultOptions, options);

    return function ctPointLabels(chart) {
      if(chart instanceof Chartist.Line) {
        chart.on('draw', function(data) {
          if(data.type === 'point') {
            data.group.elem('text', {
              x: data.x + options.labelOffset.x,
              y: data.y + options.labelOffset.y,
              style: 'text-anchor: ' + options.textAnchor
            }, options.labelClass).text(options.labelInterpolationFnc(data.value.x === undefined ? data.value.y : data.value.x + ', ' + data.value.y));
          }
        });
      }
            if(chart instanceof Chartist.Bar) {
        chart.on('draw', function(data) {
          if(data.type === 'bar') {
            data.group.elem('text', {
              x: data.x + options.labelOffset.x,
              y: data.y + options.labelOffset.y,
              style: 'text-anchor: ' + options.textAnchor
            }, options.labelClass).text(options.labelInterpolationFnc(data.value.x === undefined ? data.value.y : data.value.x + ', ' + data.value.y));
          }
        });
      }
    };
  };

}(window, document, Chartist));

4

2 回答 2

1

有一个插件可以为条形图和柱形图添加标签。

见这里：https ://github.com/YorkshireInteractive/chartist-bar-labels

然后我从以下 github 评论中借用了标签位置计算：

https://github.com/gionkunz/chartist-js/issues/281

简而言之，我在 ctBarLabels 插件选项中有以下内容：

            position: {
            x: function(data) {
                return data.x1 + (data.element.width() * .5);
            },
            y: function(data) {
                return data.y1 + (data.element.height() * -1) - 10;
            }

我现在可以使用样式表来设置标签的样式。我还可以使用函数来格式化标签（例如，货币与普通值）。

于 2015-12-31T02:18:10.990 回答
0

将您的插件代码更改为：

if(chart instanceof Chartist.Bar) {
    chart.on('draw', function(data) {
      if(data.type === 'bar') {
        data.group.elem('text', {
          x: (data.x === undefined ? data.x1 : data.x ) + options.labelOffset.x,
          y: (data.y === undefined ? data.y2 : data.y) + options.labelOffset.y,
          style: 'text-anchor: ' + options.textAnchor
        }, options.labelClass).text(options.labelInterpolationFnc(data.value.x === undefined ? data.value.y : data.value.x + ', ' + data.value.y));
      }
    });
  }
于 2015-10-23T06:37:24.047 回答