更改tick中的颜色Google图表

发布于 2025-01-25 20:41:15 字数 1691 浏览 2 评论 0原文

__HELLO,伙计们。我正在Google图表中练习。我遇到了一个问题,我无法解决。 Google图表

我正在使用ticks标签:

'vaxis':{ tick:[{v:720,f:'12:00'}

,想在tick标签中自定义两个值的颜色:

data.addRow(
        ['{{list[i][0]}}',
        { v: {{list[i][1][0]}}, f: '{{list[i][1][1]}} {**color: #335408**}Yest: + {{list[i][2]}}' }]

我该怎么做?

upd1:

    <link rel="stylesheet" href="/static/main.css">
  <script src="https://www.google.com/jsapi"></script>
  <script>
    
    // var list = {{ list|safe }}
   google.load("visualization", "1", {packages:["corechart"]});
   google.setOnLoadCallback(drawChart);
   function drawChart() {
    var data = google.visualization.arrayToDataTable([
     ['', 'May'],
     ['', 0]
   ]);
    
    {% for i in range(list|length) %}
        data.addRow(
            ['{{list[i][0]}}',
            { v: {{list[i][1][0]}}, f: '{{list[i][1][1]}}' + '\n' + 'Yest: +{{list[i][2]}}' }]
            );
    {% endfor %}
   
    var options = {
     title: 'Current month',
     hAxis: {title: ''},
     vAxis: {title: 'H:Min'},
     width: 1080,
     
     'vAxis': {
        ticks: [{ v: 720, f: '12:00' }, { v: 1440, f: '24:00' }, { v: 2160, f: '36:00' }, { v: 2880, f: '48:00' }, { v: 3600, f: '60:00'}, { v: 4320, f: '72:00'}, { v: 5040, f: '84:00'}, { v: 5760, f: '96:00'}, { v: 6480, f: '108:00'}, { v: 7200, f: '120:00'}, { v: 7920, f: '132:00'}]
    }
    };
      
    var chart = new google.visualization.ColumnChart(document.getElementById('oil'));
    chart.draw(data, options);
   }

__Hello, guys. I'm practicing in google charts. And I met a problem, which I can't to solve.
google chart

I'm using ticks labels:

'vAxis': {
ticks: [{ v: 720, f: '12:00' }

And want to customize colors for two values in tick label:

data.addRow(
        ['{{list[i][0]}}',
        { v: {{list[i][1][0]}}, f: '{{list[i][1][1]}} {**color: #335408**}Yest: + {{list[i][2]}}' }]

How can I do this?

Upd1:

    <link rel="stylesheet" href="/static/main.css">
  <script src="https://www.google.com/jsapi"></script>
  <script>
    
    // var list = {{ list|safe }}
   google.load("visualization", "1", {packages:["corechart"]});
   google.setOnLoadCallback(drawChart);
   function drawChart() {
    var data = google.visualization.arrayToDataTable([
     ['', 'May'],
     ['', 0]
   ]);
    
    {% for i in range(list|length) %}
        data.addRow(
            ['{{list[i][0]}}',
            { v: {{list[i][1][0]}}, f: '{{list[i][1][1]}}' + '\n' + 'Yest: +{{list[i][2]}}' }]
            );
    {% endfor %}
   
    var options = {
     title: 'Current month',
     hAxis: {title: ''},
     vAxis: {title: 'H:Min'},
     width: 1080,
     
     'vAxis': {
        ticks: [{ v: 720, f: '12:00' }, { v: 1440, f: '24:00' }, { v: 2160, f: '36:00' }, { v: 2880, f: '48:00' }, { v: 3600, f: '60:00'}, { v: 4320, f: '72:00'}, { v: 5040, f: '84:00'}, { v: 5760, f: '96:00'}, { v: 6480, f: '108:00'}, { v: 7200, f: '120:00'}, { v: 7920, f: '132:00'}]
    }
    };
      
    var chart = new google.visualization.ColumnChart(document.getElementById('oil'));
    chart.draw(data, options);
   }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文