0

私は欲しいものを達成するためにAngular Chartsを使用しています.昨日私はそれをしましたが、今私のクライアントはいくつかの変更を望んでいます.

{
  "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
      }
    }
  }
}

これが、チャートでそのデータをレンダリングするために使用しているコードです。今のところ"conversions : {}、オブジェクトの一部で遊んでいますtotal。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];
        });
      });
    }

そしてここにHTML

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

これが結果です

ここに画像の説明を入力

要件の 1 つは、グラフに「金額」プロパティのみを表示する必要があることです。これは、グラフから灰色の線が消えることを意味します。もう 1 つの要件は、そこに表示されるツールチップにこれを配置する必要があることです。

$ 金額 (合計)、この場合は $150 (1)

では、この場合、私に何をするように勧めますか? それを行う方法はありますか？

4

1 に答える 1

1

文字から合計を削除するのは、配列"total"からを削除するのと同じくらい簡単です。seriesConvしかし、今では 1 つのシリーズしかないため、よりシンプルにすることができます。

.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;
  })];
}

ツールチップ内でカスタム フォーマットを使用するには、tooltipTemplateChart.js のオプションを使用できます。

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

chart-options="chartOptions"次に、canvas 要素に追加します。

既存のラベルの編集のみが可能であることに注意してください。新しいデータをツールチップに追加することはできません (合計など)。

新しいデータを追加できるようにするには、(非常に複雑な)customTooltipsオプションを使用する必要があります。頑張ってください。

また、ドキュメントを読んで遊んでみてください。このフォーラムはプログラミングについて質問するためのものであり、他の人にあなたの仕事を依頼するためのものではありません.

于 2016-01-21T04:44:51.643 に答える