亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

帶有子值指標和標簽的儀表圖

帶有子值指標和標簽的儀表圖

慕的地6264312 2021-06-22 17:04:29
我是 d3.js 的新手。我想添加子值指示符和文本以及工具提示,如附圖所示。子值指標的目的是顯示一些臨界值。如何在針的末尾添加文本?我已經分享了下面的代碼。請指導我實現這一目標。爪哇腳本:(function () {  var Needle, arc, arcEndRad, arcStartRad, barWidth, chart, chartInset, degToRad, el, endPadRad, height, i, margin, needle, numSections, padRad, percToDeg, percToRad, percent, radius, ref, sectionIndx, sectionPerc, startPadRad, svg, totalPercent, width;  percent = .65;  barWidth = 60;  numSections = 3;  // / 2 for HALF circle  sectionPerc = [0.1, 0.25, 0.15];  padRad = 0;  chartInset = 10;  // start at 270deg  totalPercent = .75;  el = d3.select('.chart-gauge');  margin = {    top: 20,    right: 20,    bottom: 30,    left: 20 };  width = el[0][0].offsetWidth - margin.left - margin.right;  height = width;  radius = Math.min(width, height) / 2;  percToDeg = function (perc) {    return perc * 360;  };  percToRad = function (perc) {    return degToRad(percToDeg(perc));  };  degToRad = function (deg) {    return deg * Math.PI / 180;  };  svg = el.append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom);  chart = svg.append('g').attr('transform', `translate(${(width + margin.left) / 2}, ${(height + margin.top) / 2})`);  // build gauge bg  for (sectionIndx = i = 1, ref = numSections; 1 <= ref ? i <= ref : i >= ref; sectionIndx = 1 <= ref ? ++i : --i) {    arcStartRad = percToRad(totalPercent);    arcEndRad = arcStartRad + percToRad(sectionPerc[sectionIndx-1]);    totalPercent += sectionPerc[sectionIndx-1];    startPadRad = 0;    endPadRad = 0;    arc = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth).startAngle(arcStartRad + startPadRad).endAngle(arcEndRad - endPadRad);    chart.append('path').attr('class', `arc chart-color${sectionIndx}`).attr('d', arc);  }HTML:<div class="chart-gauge"></div>謝謝
查看完整描述

1 回答

  • 1 回答
  • 0 關注
  • 162 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號