具有自定义范围的仪表图

时间：2019-06-08 08:48:39

标签： javascript d3.js charts coffeescript data-visualization

我需要在d3量表中包含一个子值指标和文本。Screenshot

此外，如果我指定部分的数量，那么调色板将被平均分配。例如，如果我将部分的数量指定为3，则颜色将平均分为3个相等的百分比（每个33.333％）。我需要将自定义范围设置为20％红色，50％黄色和30％绿色。我该如何实现？

我基于以下代码：Codepen link

JavaScript 

var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var folderID = "FOLDERID"; // Folder id to save pdf in a folder.
var folder = DriveApp.getFolderById(folderID); 
var newSpreadsheet = SpreadsheetApp.create(pdfName); // Name new Spreadsheet
var sheet = sourcesheet.copyTo(newSpreadsheet); //copy activesheet to new spreadsheet
newSpreadsheet.getSheetByName('Sheet1').activate(); //select "sheet1"
newSpreadsheet.deleteActiveSheet(); //delete "sheet1"
var newFile = folder.createFile(newSpreadsheet);
var pdf = DriveApp.getFileById(newSpreadsheet.getId());
var theBlob = pdf.getBlob().getAs('application/pdf').setName(pdfName); //create pdf 
from new sheet in folder

var   url,  //create variable from url of the new sheet
    sheets = newSpreadsheet.getSheets()


url = Drive.Files.get(newSpreadsheet.getId())
      .exportLinks['application/pdf']; //create the pdf 
url = url + '&size=a4' + //paper size
'&portrait=true' + //orientation, false for landscape
'&fitw=true' + //fit to width, false for actual size
'&sheetnames=false&printtitle=false&pagenumbers=false' + //hide optional
'&gridlines=false' + //false = hide gridlines, true = show
'&fzr=false'; //do not repeat row headers (frozen rows) on each page, true = show
 var token = ScriptApp.getOAuthToken();
 var response = UrlFetchApp.fetch(url, {
  headers: {
     'Authorization': 'Bearer ' + token
 }
 });


DriveApp.getFilesByName(pdfName).next().setTrashed(true); //delete newSpreadsheet

var attachmentName = pdfName + '.pdf';

var optAdvancedArgs = {name: "NAMEFROM", htmlBody: htmlBody, replyTo : from, 
from:from, attachments: [response.getBlob().setName(attachmentName)], };  //attach pdf

GmailApp.sendEmail(mailTo, subject, body, optAdvancedArgs); //send email with 
advanced arguments

CSS： 

percent = .65 
barWidth = 60

numSections = 3

# / 2 for HALF circle
sectionPerc = 1 / numSections / 2
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 = (perc) ->
  perc * 360

percToRad = (perc) ->
  degToRad percToDeg perc

degToRad = (deg) ->
  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 in [1..numSections]

  arcStartRad = percToRad totalPercent
  arcEndRad = arcStartRad + percToRad sectionPerc
  totalPercent += sectionPerc

  startPadRad = if sectionIndx is 0 then 0 else padRad / 2
  endPadRad = if sectionIndx is numSections then 0 else padRad / 2

  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)

class Needle

  constructor: (@len, @radius) ->

  drawOn: (el, perc) ->

    el.append('circle')
      .attr('class', 'needle-center')
      .attr('cx', 0)
      .attr('cy', 0)
      .attr('r', @radius)


    el.append('path')
      .attr('class', 'needle')
      .attr('d', @mkCmd(perc))

  animateOn: (el, perc) ->
    self = this
    el
      .transition()
      .delay(500)
      .ease('elastic')
      .duration(3000)
      .selectAll('.needle')
      .tween('progress', ->
        (percentOfPercent) ->
          progress = percentOfPercent * perc
          d3
            .select(this)
            .attr('d', self.mkCmd progress)
      )

  mkCmd: (perc) ->
    thetaRad = percToRad perc / 2 # half circle

    centerX = 0
    centerY = 0

    topX = centerX - @len * Math.cos(thetaRad)
    topY = centerY - @len * Math.sin(thetaRad)

    leftX = centerX - @radius * Math.cos(thetaRad - Math.PI / 2)
    leftY = centerY - @radius * Math.sin(thetaRad - Math.PI / 2)

    rightX = centerX - @radius * Math.cos(thetaRad + Math.PI / 2)
    rightY = centerY - @radius * Math.sin(thetaRad + Math.PI / 2)

    "M #{leftX} #{leftY} L #{topX} #{topY} L #{rightX} #{rightY}"

needle = new Needle 140, 15
needle.drawOn chart, 0
needle.animateOn chart, percent

HTML： 

@import compass

.chart-gauge
  width: 400px
  margin: 10px auto  

.chart-color1
  fill: #D82724

.chart-color2
  fill: #FCBF02

.chart-color3
  fill: #92D14F

.needle,
.needle-center
  fill: #464A4F

.prose
  text-align: center
  font-family: sans-serif
  color: #ababab

谢谢

1 个答案:

答案 0 :(得分：0)

您的问题中有两个不相关的问题，如果需要，您有两个不相关的问题。在SO提出问题时，请每个问题仅保留一个问题。话虽如此，我将回答有关背景的问题（随时将另一个问题与您的另一个问题一起发帖）。

在链接的代码（CoffeeScript）中，这定义了每个部分的角度：

sectionPerc = 1 / numSections / 2
for sectionIndx in [1..numSections]
  arcStartRad = percToRad totalPercent
  arcEndRad = arcStartRad + percToRad sectionPerc
  totalPercent += sectionPerc
  //etc...

如您所见，sectionPerc有一个值。让我们将其转换为值数组，并使用其索引：

sectionPerc = [0.1, 0.25, 0.15]
for sectionIndx in [1..numSections]
  arcStartRad = percToRad totalPercent
  arcEndRad = arcStartRad + percToRad sectionPerc[sectionIndx-1]
  totalPercent += sectionPerc[sectionIndx-1]
  //etc...

请注意以下事实，因为我们有一个半圆，所以我使用的是 half （一半），分别是20％，50％和30％。

这是分叉的笔：https://codepen.io/anon/pen/XwvgMb?editors=0010

这是编译后的CoffeeScript：

(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);
  }

  Needle = class Needle {
    constructor(len, radius1) {
      this.len = len;
      this.radius = radius1;
    }

    drawOn(el, perc) {
      el.append('circle').attr('class', 'needle-center').attr('cx', 0).attr('cy', 0).attr('r', this.radius);
      return el.append('path').attr('class', 'needle').attr('d', this.mkCmd(perc));
    }

    animateOn(el, perc) {
      var self;
      self = this;
      return el.transition().delay(500).ease('elastic').duration(3000).selectAll('.needle').tween('progress', function () {
        return function (percentOfPercent) {
          var progress;
          progress = percentOfPercent * perc;
          return d3.select(this).attr('d', self.mkCmd(progress));
        };
      });
    }

    mkCmd(perc) {
      var centerX, centerY, leftX, leftY, rightX, rightY, thetaRad, topX, topY;
      thetaRad = percToRad(perc / 2); // half circle
      centerX = 0;
      centerY = 0;
      topX = centerX - this.len * Math.cos(thetaRad);
      topY = centerY - this.len * Math.sin(thetaRad);
      leftX = centerX - this.radius * Math.cos(thetaRad - Math.PI / 2);
      leftY = centerY - this.radius * Math.sin(thetaRad - Math.PI / 2);
      rightX = centerX - this.radius * Math.cos(thetaRad + Math.PI / 2);
      rightY = centerY - this.radius * Math.sin(thetaRad + Math.PI / 2);
      return `M ${leftX} ${leftY} L ${topX} ${topY} L ${rightX} ${rightY}`;
    }};



  needle = new Needle(140, 15);

  needle.drawOn(chart, 0);

  needle.animateOn(chart, percent);

}).call(this);

//# sourceURL=coffeescript
.chart-gauge {
  width: 400px;
  margin: 10px auto;
}

.chart-color1 {
  fill: #D82724;
}

.chart-color2 {
  fill: #FCBF02;
}

.chart-color3 {
  fill: #92D14F;
}

.needle,
.needle-center {
  fill: #464A4F;
}

.prose {
  text-align: center;
  font-family: sans-serif;
  color: #ababab;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div class="chart-gauge"></div>

相关问题
最新问题