10 examples of 'chartjs label position' in JavaScript

229
function addXAxisLabel(chart, label, labelLengthLimit) {
230
    if (labelLengthLimit === void 0) { labelLengthLimit = 64; }
231
    var shortenedLabel = limitLabelLength(label, labelLengthLimit);
232
    var shortenedLabelSVG = chart.chart.append("text").attr("class", "x label").attr("text-anchor", "middle").attr("x", chart.margin.left + chart.width / 2).attr("y", chart.fullHeight - 16).text(shortenedLabel);
233
    if (label.length > labelLengthLimit) {
234
        shortenedLabelSVG.append("svg:title").text(label);
235
    }
236
}

352
createLabels({ root }) {
353
  const uid = this.uid;
354
  const radius = this.getOuterRadius();
355
356
  root
357
    .append('g')
358
    .attr('id', `labels-${uid}`)
359
    .attr('transform', `translate(${radius}, ${radius})`);
360
}

55
return function ctBarLabels(chart) {
56
  if (chart instanceof Chartist.Bar) {
57
58
    options = Chartist.extend({}, defaultOptionsBase, options);
59
    if (chart.options.horizontalBars) {
60
      options = Chartist.extend({}, defaultOptionsHorizontalBars, options);
61
    } else {
62
      options = Chartist.extend({}, defaultOptionsVerticalBars, options);
63
    }
64
    var highValue;
65
    if (options.thresholdOptions) {
66
      highValue = getHighValue(chart);
67
    }
68
69
    chart.on('draw', function(data) {
70
      if (data.type === 'bar') {
71
72
        // bar value is in a different spot depending on whether or not the chart is horizontalBars
73
        var barValue = data.value.x === undefined ? data.value.y : data.value.x;
74
        var indexClass = options.includeIndexClass ? ['ct-bar-label-i-', data.seriesIndex, '-', data.index].join('') : '';
75
        var thresholdClass = getThresholdClass(options.thresholdOptions, highValue, barValue);
76
77
        if (options.showZeroLabels || (!options.showZeroLabels && barValue != 0)) {
78
          data.group.elem('text', {
79
            x: ((options.startAtBase &&  chart.options.horizontalBars) ? data.x1 : data.x2) + options.labelOffset.x,
80
            y: ((options.startAtBase && !chart.options.horizontalBars) ? data.y1 : data.y2) + options.labelOffset.y,
81
            style: 'text-anchor: ' + options.textAnchor
82
          }, [options.labelClass, indexClass, thresholdClass].join(' ')).text(options.labelInterpolationFnc(barValue));
83
        }
84
      }
85
    });
86
  }
87
};

304
function moveLabel() {
305
    var dX = d3.event.x;// subtract cx
306
    var dY = d3.event.y;// subtract cy
307
    d3.select(this).attr("transform", "translate(" + dX + ", " + dY + ")");
308
}

262
private getLabelPosition(d: TNode): string {
263
  return d.labelPosition() === "auto" ? this.getAutomaticLabelPosition(d) : d.labelPosition()
264
}

57
_addPieLabel(chart) {
58
  const coord = chart.get('coord');
59
  const geom = chart.get('geoms')[0];
60
  const shapes = geom.get('shapes');
61
  const { center } = coord; // 极坐标圆心坐标
62
  const r = coord.circleRadius; // 极坐标半径
63
  const canvas = chart.get('canvas'); // 获取 canvas 对象
64
  const labelGroup = canvas.addGroup(); // 用于存储文本以及文本连接线
65
66
  shapes.forEach((shape) => {
67
    const shapeAttrs = shape.attr();
68
    const origin = shape.get('origin');
69
    const { startAngle, endAngle } = shapeAttrs;
70
    const middleAngle = (startAngle + endAngle) / 2;
71
    const routerPoint = this._getEndPoint(center, middleAngle, r + OFFSET);
72
    const textName = new Shape.Text({
73
      attrs: {
74
        x: routerPoint.x,
75
        y: routerPoint.y,
76
        fontSize: 12,
77
        fill: origin.color,
78
        text: origin._origin.name,
79
        textBaseline: 'middle',
80
        lineHeight: 12,
81
      },
82
      origin: origin._origin, // 存储原始数据
83
    });
84
    labelGroup.add(textName);
85
  });
86
  canvas.draw();
87
}

211
function drawChart(labels, data) {
212
    var ctx = document.getElementById('statusChart').getContext('2d');
213
    var myChart = new Chart(ctx, {
214
        type: 'bar',
215
        data: {
216
            labels: labels,
217
            datasets: [{
218
                label: '# of Containers',
219
                data: data,
220
                backgroundColor: [
221
                    'rgba(120,164,107, .2)',
222
                    'rgba(199, 192, 40, .2)',
223
                    'rgba(255, 0, 0, .2)',
224
                    'rgba(255, 0, 0, .2)',
225
                ],
226
                borderColor: [
227
                    'rgba(120,164,107, 1)',
228
                    'rgba(199, 192, 40, 1)',
229
                    'rgba(255, 0, 0, 1)',
230
                    'rgba(255, 0, 0, 1)',
231
                ],
232
                borderWidth: 1
233
            }]
234
        },
235
        options: {
236
            scales: {
237
                yAxes: [{
238
                    ticks: {
239
                        beginAtZero: true
240
                    }
241
                }]
242
            }
243
        }
244
    });
245
}

141
function formatLabel(
142
  [timeStart, timeEnd],
143
  unit,
144
  labelWidth,
145
  formatOptions = defaultHeaderFormats
146
) {
147
  let format
148
  if (labelWidth >= 150) {
149
    format = formatOptions[unit]['long']
150
  } else if (labelWidth >= 100) {
151
    format = formatOptions[unit]['mediumLong']
152
  } else if (labelWidth >= 50) {
153
    format = formatOptions[unit]['medium']
154
  } else {
155
    format = formatOptions[unit]['short']
156
  }
157
  return timeStart.format(format)
158
}

118
legendPosition(): "top" | "bottom" {
119
  return this.xAxis() === "x1" ? "top" : "bottom"
120
}

432
renderSeriesLabel(paper, positionSet, labels, labelTheme) {
433
    const labelSet = paper.set();
434
    const attributes = {
435
        'font-size': labelTheme.fontSize,
436
        'font-family': labelTheme.fontFamily,
437
        'font-weight': labelTheme.fontWeight,
438
        fill: '#ffffff',
439
        opacity: 0
440
    };
441
442
    labels.forEach((categoryLabel, categoryIndex) => {
443
        categoryLabel.forEach((label, seriesIndex) => {
444
            const seriesLabel = raphaelRenderUtil.renderText(
445
                paper,
446
                positionSet[categoryIndex][seriesIndex].end,
447
                label, attributes
448
            );
449
450
            seriesLabel.node.style.userSelect = 'none';
451
            seriesLabel.node.style.cursor = 'default';
452
453
            labelSet.push(seriesLabel);
454
        });
455
    });
456
457
    this.labelSet = labelSet;
458
459
    return labelSet;
460
}