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