Cách thay đổi màu của văn bản chú thích trong google-charts

Question

Làm cách nào để thay đổi màu của văn bản chú thích trong Công cụ Biểu đồ của Google?

Dưới đây là một ví dụ

google.load('visualization', '1', {packages: ['corechart']}); 
google.setOnLoadCallback(drawChart); 

function drawChart() { 
    var data = new google.visualization.DataTable();  
    data.addColumn('date', 'Date'); 
    data.addColumn('number', 'Sales'); 
    data.addColumn({id: 'title', label: 'Title', type: 'string', role: 'annotation'}); 
    data.addRows([ 
     [new Date(2012, 3, 5), 80, null], 
     [new Date(2012, 3, 12), 120, 'New Product'], 
     [new Date(2012, 3, 19), 80, null], 
     [new Date(2012, 3, 26), 65, null], 
     [new Date(2012, 4, 2), 70, null], 
    ]); 

    var options = { 
     title: 'Sales by Week', 
     displayAnnotations: true, 
     hAxis: {title: 'Date', 
       titleTextStyle: {color: 'grey'}}, 
     colors: ['#f07f09'] 
     }; 

    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options);  
} 

Tôi muốn các dòng là cam và các văn bản chú thích màu xám. Hiện tại, văn bản chú thích có màu cam.

Answer 1

Thực ra bạn có thể. Màu của các chú thích giống như màu của đường kẻ. Chỉ cần đặt một dấu chấm ở nơi bạn muốn tạo chú thích và đặt màu của dấu chấm thành màu chú thích mong muốn.

data.addColumn({type: 'string', role: 'style'}); 
data.addColumn({type:'string', role:'annotation'}); 

và sau đó khi bạn thêm dữ liệu

'point { size: 14; shape-type: circle; fill-color: #63A74A','Your annotation' 

Xem ví dụ tại http://www.marketvolume.com/stocks/stochasticsmomentumindex.asp?s=SPY&t=spdr-s-p-500

Answer 2

Câu trả lời ngắn gọn: không, bạn không thể thay đổi màu văn bản thông qua các tùy chọn tiêu chuẩn (bạn có thể viết gì đó để tìm văn bản đó trong SVG và thay đổi màu của nó bằng javascript, nhưng vượt quá mức của tôi).

Bạn có thể xem câu trả lời từ ASGallant trên Google Groups here và ví dụ của mình here.

// code borrowed from Google visualization API playground, slightly modified here 

google.load('visualization', '1', {packages: ['corechart']}); 
google.setOnLoadCallback(drawVisualization); 

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'x'); 
    data.addColumn({type: 'string', role: 'annotation'}); 
    data.addColumn({type: 'string', role: 'annotationText'}); 
    data.addColumn('number', 'Cats'); 
    data.addColumn('number', 'Blanket 1'); 
    data.addColumn('number', 'Blanket 2'); 
    data.addRow(["A", null, null, 1, 1, 0.5]); 
    data.addRow(["B", null, null, 2, 0.5, 1]); 
    data.addRow(["C", null, null, 4, 1, 0.5]); 
    data.addRow(["D", null, null, 8, 0.5, 1]); 
    data.addRow(["E", 'foo', 'foo text', 7, 1, 0.5]); 
    data.addRow(["F", null, null, 7, 0.5, 1]); 
    data.addRow(["G", null, null, 8, 1, 0.5]); 
    data.addRow(["H", null, null, 4, 0.5, 1]); 
    data.addRow(["I", null, null, 2, 1, 0.5]); 
    data.addRow(["J", null, null, 3.5, 0.5, 1]); 
    data.addRow(["K", null, null, 3, 1, 0.5]); 
    data.addRow(["L", null, null, 3.5, 0.5, 1]); 
    data.addRow(["M", null, null, 1, 1, 0.5]); 
    data.addRow(["N", null, null, 1, 0.5, 1]); 

    // Create and draw the visualization. 
    var chart = new google.visualization.LineChart(document.getElementById('visualization')); 
    chart.draw(data, { 
     annotation: { 
      1: { 
       style: 'line' 
      } 
     }, 
     curveType: "function", 
     width: 500, 
     height: 400, 
     vAxis: { 
      maxValue: 10 
     } 
    }); 
} 

Điều tốt nhất bạn có thể làm là thay đổi kiểu của dòng, nhưng có vẻ như bạn hiện có thể thay đổi màu của đường kẻ.

Answer 3

Nếu chú thích của bạn không "chạm", nghĩa là. các điểm bạn muốn chú thích không nằm cạnh nhau, bạn có thể thêm dòng thứ hai và thêm chú thích vào dòng đó.

Trong ví dụ JSON bên dưới, tôi có ngày và "tổng số dư", cũng như dòng "Ann".

"cols":[ 
     { 
     "id":"date", 
     "label":"date", 
     "type":"date", 
     "p":{ 
      "role":"domain" 
     } 
     }, 
     { 
     "id":"total-balance", 
     "label":"Total balance", 
     "type":"number", 
     "p":{ 
      "role":"data" 
     } 
     }, 
     { 
     "id":"ann", 
     "label":"Ann", 
     "type":"number", 
     "p":{ 
      "role":"data" 
     } 
     }, 
     { 
     "type":"string", 
     "p":{ 
      "role":"annotation" 
     } 
     }, 
     { 
     "type":"string", 
     "p":{ 
      "role":"annotationText" 
     } 
     } 
    ], 

Chú thích xuất hiện sau cột "Ann" để nó sẽ được thêm vào điểm dữ liệu "Ann".

Trong JSON của tôi, ngày và "tổng cân đối" luôn tràn ngập trong "Ann" và các chú thích thường rỗng:.

"rows":[ 
    { 
    "c":[ 
     { 
      "v":"Date(2013, 0, 1)" 
     }, 
     { 
      "v":1000 
     }, 
     { 
      "v":null 
     }, 
     { 
      "v":null 
     }, 
     { 
      "v":null 
     } 
    ] 
    }, 
    { 
    "c":[ 
     { 
      "v":"Date(2013, 0, 8)" 
     }, 
     { 
      "v":1001 
     }, 
     { 
      "v":null 
     }, 
     { 
      "v":null 
     }, 
     { 
      "v":null 
     } 
    ] 
    }, 

Khi tôi cần một chú thích, các "Ann" tế bào được có cùng giá trị với tổng số dư và chú thích được thêm:

{ 
    "c":[ 
     { 
      "v":"Date(2013, 1, 26)" 
     }, 
     { 
      "v":2000 
     }, 
     { 
      "v":2000 
     }, 
     { 
      "v":"Something!" 
     }, 
     { 
      "v":"Something happened here!" 
     } 
    ] 
    }, 

Trong cấu hình GChart, giờ đây bạn có thể đặt hai màu. Một cho dòng bình thường, và một cho "Ann".

colors: ['black','red'] 

Nếu bạn không có chú thích "đụng chạm", GCharts sẽ không vẽ một ranh giới giữa họ và những điểm sẽ vẫn "vô hình", trong khi chú thích xuất hiện ở đúng vùng da bên.

Answer 4

Không cần cột kiểu dữ liệu thêm và mã hệ thống ống nước để lấp đầy nó cho mỗi hàng với xấu xí (và thậm chí không đầy đủ ở trên) định dạng chuỗi. Chỉ có khu nghỉ mát để tách cột kiểu dáng nếu bạn muốn có màu chú thích khác nhau cho các điểm dữ liệu khác nhau.

Có một khung cảnh toàn cầu, tìm kiếm annotations.textStyle trong https://developers.google.com/chart/interactive/docs/gallery/linechart

var options = { 
    annotations: { 
    textStyle: { 
     fontName: 'Times-Roman', 
     fontSize: 18, 
     bold: true, 
     italic: true, 
     // The color of the text. 
     color: '#871b47', 
     // The color of the text outline. 
     auraColor: '#d799ae', 
     // The transparency of the text. 
     opacity: 0.8 
    } 
    } 
}; 

Đây là một mã số khái niệm cho trường hợp của bạn (chú ý khởi tạo khác nhau google.charts, rất quan trọng):

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

google.charts.load('current', { 'packages': ['corechart', 'line', 'bar'] }); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
    var data = new google.visualization.DataTable();  
    data.addColumn('date', 'Date'); 
    data.addColumn('number', 'Sales'); 
    data.addColumn({id: 'title', label: 'Title', type: 'string', role: 'annotation'}); 
    data.addRows([ 
    [new Date(2012, 3, 5), 80, null], 
    [new Date(2012, 3, 12), 120, 'New Product'], 
    [new Date(2012, 3, 19), 80, null], 
    [new Date(2012, 3, 26), 65, null], 
    [new Date(2012, 4, 2), 70, null], 
    ]); 

    var options = { 
    chart: { 
     title: 'Sales by Week' 
    }, 
    hAxis: { 
     title: 'Date', 
     titleTextStyle: {color: 'grey'} 
    }, 
    annotations: { 
     textStyle: { 
     color: 'grey', 
     } 
    } 
    colors: ['#f07f09'] 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options);  

}

Bạn cũng có thể thay đổi định dạng văn bản khác của chú thích, như in đậm, in nghiêng, kiểu phông chữ, v.v. le nơi hầu hết văn bản được định cấu hình để in đậm:

   var options = { 
        chart: { 
        title: title 
        }, 
        hAxis: { 
        textStyle: { 
         bold: true 
        } 
        }, 
        vAxis: { 
        format: 'decimal', 
        textStyle: { 
         bold: true 
        } 
        }, 
        legendTextStyle: { 
        bold: true 
        }, 
        titleTextStyle: { 
        bold: true 
        }, 
        width: chart_width, 
        //theme: 'material', // material theme decreases the color contrast and sets the black color items (all text) to 171,171,171 grey -> washed out 
        annotations: { 
        alwaysOutside: true, 
        highContrast: true, // default is true, but be sure 
        textStyle: { 
         bold: true 
        } 
        } 
       };