Angular Charts with some especial requirements

问题:

I am using Angular Charts in order to achieve what I want, yesterday I did it, but now my client wants some changes, here is the data I am receiving:

{
  "12-15-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 8,
        "real": 1
      }
    }
  },
  "12-16-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 18,
        "real": 1
      }
    }
  },
  "12-17-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 1,
        "amount": 22
      },
      "clicks": {
        "total": 12,
        "real": 1
      }
    }
  },
  "12-18-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 6,
        "real": 1
      }
    }
  },
  "12-19-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 12,
        "real": 1
      }
    }
  },
  "12-20-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 10,
        "real": 1
      }
    }
  },
  "12-21-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 1,
        "amount": 22
      },
      "clicks": {
        "total": 1,
        "real": 1
      }
    }
  },
  "12-22-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 1,
        "amount": 150
      },
      "clicks": {
        "total": 1,
        "real": 1
      }
    }
  },
  "12-26-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 4,
        "real": 1
      }
    }
  },
  "12-28-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 1,
        "real": 1
      }
    }
  },
  "12-29-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 1,
        "real": 1
      }
    }
  },
  "01-03-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 2,
        "real": 1
      }
    }
  },
  "01-04-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 3,
        "real": 1
      }
    }
  },
  "01-05-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 6,
        "real": 1
      }
    }
  },
  "01-06-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 6,
        "real": 1
      }
    }
  },
  "01-10-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 1,
        "real": 1
      }
    }
  },
  "01-11-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 2,
        "real": 1
      }
    }
  },
  "01-14-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 22,
        "real": 1
      }
    }
  }
}

and here is the code I am using to render that data in my chart, for now I am just playing with the "conversions : {} part of the Object, which contains total and amount

    .then(function(data) {          
      $scope.labels = Object.keys(data);
      $scope.seriesConv = ["amount", "total"];
      $scope.dataConv = $scope.seriesConv.map(function(serie) {
        return $scope.labels.map(function(label) {
          $scope.trafficSource = Object.keys(data[label])[0];
          return data[label][$scope.trafficSource].conversions[serie];
        });
      });
    }

and here the HTML

  <canvas id="line" class="chart chart-line" height="100"
          chart-data="dataConv" chart-labels="labels"
          chart-series="seriesConv">
  </canvas>

this is the result

one of the requirements is that now I should display only the "amount" property in the chart, which means that the grey line should disappear from the chart, and the other requirement is that I need to put this in that tooltip you see there:

$ The Amount (total) which in this case would be $150 (1)

so, what do you recommend me to do in this case ? is there a way to do that ?

回答1:

Remove the total from the chars is as simple as removing the "total" from the seriesConv array. But since it's now only one serie, it can be simpler:

.then(function(data) {          
  $scope.labels = Object.keys(data);
  $scope.seriesConv = ["Amount"];
  $scope.dataConv = [$scope.labels.map(function(label) {
    $scope.trafficSource = Object.keys(data[label])[0];
    return data[label][$scope.trafficSource].conversions.amount;
  })];
}

To use a custom format inside the tooltip you can use the tooltipTemplate option from Chart.js:

$scope.chartOptions = {
  tooltipTemplate: "$<%= value %>",
};

Then add chart-options="chartOptions" to the canvas element.

Note that it's only possible to edit the existing label, you can't add new data to the tooltip (the total for example).

To be able to add new data you'll have to use the (much complex) customTooltips option. Good luck with that.

Also, please read the docs and try playing around. This forum is for question about programming, not for asking the others to do your job.