Как изменить цвет текста аннотаций в google-диаграммах

Question

Как изменить цвет текста аннотации в Инструментах диаграмм диаграммы диаграммы диаграммы диаграммы?

Вот пример

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

Я хочу, чтобы линия, чтобы быть оранжевой, а текст аннотаций в сером цвете. В настоящее время текст аннотации оранжевый.

Answer 1

На самом деле вы можете. Цвет аннотаций совпадает с цветом линии. Просто поставьте точку в том месте, где вы хотите сделать аннотацию, и установите цвет точки в желаемый цвет аннотации.

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

, а затем, когда вы добавляете данные

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

См пример на http://www.marketvolume.com/stocks/stochasticsmomentumindex.asp?s=SPY&t=spdr-s-p-500

Answer 2

Короткий ответ: нет, вы не можете изменить цвет текста с помощью стандартных параметров (вы могли бы написать что-то, чтобы найти этот текст в SVG и изменить его цвет с помощью javascript, но это выше моего уровня).

Вы можете увидеть ответ от ASGallant в группах Google here и его пример 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 
     } 
    }); 
} 

Лучшее, что вы можете сделать, это изменить стиль линии, но это не выглядит, как вы можете в данный момент изменить цвет линии.

Answer 3

Если ваши аннотации не «касаются», т.е. точки, которые вы хотите комментировать, не являются рядом друг с другом, вы можете добавить вторую строку и добавить аннотации к этой строке.

В приведенном ниже примере JSON у меня есть дата и «общий баланс», а также линия «Энн».

"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" 
     } 
     } 
    ], 

Аннотации приводятся после столбца «Ann», поэтому они будут добавлены в точки данных «Ann».

В моей JSON, дата и «полный баланс» всегда заполнены в «Ann» и аннотация обычно пустая.

"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 
     } 
    ] 
    }, 

Когда мне нужна аннотация, клетка «Энн» получает то же значение, что и общий баланс, а также аннотации добавлено:

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

В конфигурации вашего GChart, вы можете теперь установить два цвета. Один для обычной линии, а другой для «Энн».

colors: ['black','red'] 

Если у вас нет аннотаций «трогательных», GCharts не будет рисовать линию между ними и точки будут оставаться «невидимыми», в то время как аннотации появляются точно в нужном месте.

Answer 4

Нет необходимости в дополнительной колонке данных типа и кода слесарного, чтобы заполнить его для каждой строки с некрасиво (и даже неполный выше) форматирование строки. Используйте только отдельный столбец стиля, если вы хотите иметь разные цвета аннотации для разных точек данных.

Там в глобальные настройки, поиск annotations.textStyle в 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 
    } 
    } 
}; 

Вот это понятие код для Вашего случая (обратите внимание на различную инициализацию google.charts, очень важно):

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

}

Вы также можете изменить другое форматирование текста аннотации, как жирный, курсив, шрифт и т. Д. Вот пример le, где большая часть текста сконфигурирована как жирная:

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