Question

我想使用HTML-JavaScript在google chart中绘制一个简单的柱形图。我使用Google materiel chart CDN绘制了一个有4行的柱形图有4种不同的颜色。

我尝试了很多选择，但没有任何工作正常。当我使用colors: ['#b0120a', '#004411', '#ffab91', '#004411']时，只有第一种颜色显示在所有4列中。我也试过了{role:'style'}但仍然没有工作。

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      //google.charts.load('current', {'packages':['bar']});
      google.charts.load('visualization', '1', {packages: ['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        /*var data = google.visualization.arrayToDataTable([
          ['Class', 'Total',{role: 'style'}],
          ['A', 10,'color: #b0120a'],
          ['B', 30,'color: #004411'],
          ['C', 20,'color: #ffab91'],
          ['D', 30,'color: #004411']
        ]);*/
        var data = google.visualization.arrayToDataTable([
          ['Class', 'Total'],
          ['A', 10],
          ['B', 30],
          ['C', 20],
          ['D', 30]
        ]);

        var options = {
          isStacked: true,
          title: 'Class wise total students',
          colors: ['#b0120a', '#004411', '#ffab91', '#004411'],
         };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
</head>
<body>
<div id="columnchart_material" style="width: 100%; height: 100%;"></div>
</body>
</html>

图表如下：

但是我希望4列有4种不同的颜色。提前谢谢。

Answer 1

Yaa，最后我把这个做成了正确而且我想成为。如果您需要，请参阅下面的代码。

/**
 * LoanLog generated by hbm2java
 */
@Entity
@Table(name="LoanLog"
    ,schema="dbo"
    ,catalog="Project2"
)
public class LoanLog  implements java.io.Serializable {


     private int id;
     private Account account;
     private CustInfo custInfo;
     private LoanInfo loanInfo;
     private Date loanDate;
     private BigDecimal amount;
     private Integer duration;
     private Integer payingPeriod;
     private BigDecimal rate;
     private Set<PaymentLog> paymentLogs = new HashSet<PaymentLog>(0);
     private Set<FineLog> fineLogs = new HashSet<FineLog>(0);

    public LoanLog() {
    }


    public LoanLog(int id) {
        this.id = id;
    }
    public LoanLog(int id, Account account, CustInfo custInfo, LoanInfo loanInfo, Date loanDate, BigDecimal amount, Integer duration, Integer payingPeriod, BigDecimal rate, Set<PaymentLog> paymentLogs, Set<FineLog> fineLogs) {
       this.id = id;
       this.account = account;
       this.custInfo = custInfo;
       this.loanInfo = loanInfo;
       this.loanDate = loanDate;
       this.amount = amount;
       this.duration = duration;
       this.payingPeriod = payingPeriod;
       this.rate = rate;
       this.paymentLogs = paymentLogs;
       this.fineLogs = fineLogs;
    }

      @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "Id", unique = true, nullable = false)
    public int getId() {
        return this.id;
    }

    public void setId(int id) {
        this.id = id;
    }

    @ManyToOne(fetch=FetchType.LAZY)
    @JoinColumn(name="EmployId")
    public Account getAccount() {
        return this.account;
    }

    public void setAccount(Account account) {
        this.account = account;
    }

@ManyToOne(fetch=FetchType.LAZY)
    @JoinColumn(name="CustId")
    public CustInfo getCustInfo() {
        return this.custInfo;
    }

    public void setCustInfo(CustInfo custInfo) {
        this.custInfo = custInfo;
    }

@ManyToOne(fetch=FetchType.LAZY)
    @JoinColumn(name="LoanId")
    public LoanInfo getLoanInfo() {
        return this.loanInfo;
    }

    public void setLoanInfo(LoanInfo loanInfo) {
        this.loanInfo = loanInfo;
    }

    @Temporal(TemporalType.TIMESTAMP)
    @Column(name="LoanDate", length=23)
    public Date getLoanDate() {
        return this.loanDate;
    }

    public void setLoanDate(Date loanDate) {
        this.loanDate = loanDate;
    }


    @Column(name="Amount", scale=4)
    public BigDecimal getAmount() {
        return this.amount;
    }

    public void setAmount(BigDecimal amount) {
        this.amount = amount;
    }


    @Column(name="Duration")
    public Integer getDuration() {
        return this.duration;
    }

    public void setDuration(Integer duration) {
        this.duration = duration;
    }


    @Column(name="PayingPeriod")
    public Integer getPayingPeriod() {
        return this.payingPeriod;
    }

    public void setPayingPeriod(Integer payingPeriod) {
        this.payingPeriod = payingPeriod;
    }


    @Column(name="Rate", precision=10, scale=4)
    public BigDecimal getRate() {
        return this.rate;
    }

    public void setRate(BigDecimal rate) {
        this.rate = rate;
    }

@OneToMany(fetch=FetchType.LAZY, mappedBy="loanLog")
    public Set<PaymentLog> getPaymentLogs() {
        return this.paymentLogs;
    }

    public void setPaymentLogs(Set<PaymentLog> paymentLogs) {
        this.paymentLogs = paymentLogs;
    }

@OneToMany(fetch=FetchType.LAZY, mappedBy="loanLog")
    public Set<FineLog> getFineLogs() {
        return this.fineLogs;
    }

    public void setFineLogs(Set<FineLog> fineLogs) {
        this.fineLogs = fineLogs;
    }




}

我需要在这里更改<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('visualization', '1.1', {packages: ['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Class', 'Total',{role: 'style'}], ['A', 10,'color: #b0120a'], ['B', 30,'color: #004411'], ['C', 20,'color: #ffab91'], ['D', 30,'color: #004411'] ]); var options = { isStacked: false, title: 'Class wise total students', }; var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material')); chart.draw(data, options); } </script> </head> <body> <div id="columnchart_material" style="width: 100%; height: 100%;"></div> </body> </html>的定义。从chart到修改后的var chart = new google.charts.Bar(document.getElementById('columnchart_material'));。它现在正在运作。图表就像....

Google Material Chart柱形图（条形图）自定义列颜色不起作用

1 个答案: