Question

https://developers.google.com/chart/interactive/docs/gallery/linechart

你好，伙计们，我想知道有一种方法可以在线下移时改变线的颜色。我用谷歌搜索，但我找不到任何东西。

例如，线图向上移动，一旦图形线向下倾斜，向下移动就可以了，向下只应该是红色。如果之后它向上移动，那么向上的线不应该是红色。

以下是我想要获取的内容的屏幕截图： http://imgur.com/a/GuWDx

如果有人知道，请帮助我

以下是我现在正在做的事情的代码：

function draw_chart(chart_data, id, action)
{
    var url = base_url + "controller/function/" + id ;
    statData = getAjax(url, '', false, 'json');
    minimum = '';
    maximum = '';
    upside = '';

    if (statData.min) {
        minimum = statData.min;
    }
    if (statData.max) {
        maximum = statData.max;
    }
    if (statData.upside == '1') {
        upside = -1;
    }

    value = $("#value_" + id).val();
    var name = $('#name_' + id).val();
    var names = [];
    if (value == 2) {
        var names = name.split('/');
    } else {
        names[0] = name;
    }
    title = $("#name_" + id).val();
    google.load('visualization', '1.1', {packages: ['line', 'corechart']});
    format = $("#format-select_" + id + " option:selected").val();

    if (statData.row[0].type == 'currency') {
        format = '$#';
    } 
    var options = {
        title: title,
        width: 820,
        height: 500,
        titlePosition: 'none',
        legend: 'none',
        lineWidth: 3,
        annotation: {
            0: { style: "line"},
            1: { style: "line"}
        },
        series: {0: { style: "area"} , 1: {type: "area"}},    
        animation: {duration: 1000, easing: 'in'},
        strictFirstColumnType: true,
        fontColor: "#333333",
        fontSize: "12px",
        colors: ["#5AA023", "#3F5F9F" , ""],
        pointSize: 6,
        fontSize: 11,
        enableEvents: true,
        forceIFrame: false,
        tooltip: {showColorCode: false, },
        vAxis: {
                gridlines:{color: "#E6E6E6"},
                textStyle:{color: "#666666"}, 
                baselineColor: "#CACACA", 
                format: format,
                viewWindow:{
                    min: minimum,
                    max: maximum
                },
                direction: upside,                
            },
        hAxis: {gridlines:{color: "#E6E6E6" , count:chart_data.length}, 
                baselineColor: "#CACACA",  
                textStyle:{color: "#666666"}, 
                format: "MMM dd yyyy",
                textPosition: "out", 
                slantedText: true,
                },
        chartArea: {height: 420, width: 750, top: 14, left: 45, right: 0}
    };
    if (action && action == "update") {
        //alert(action);
    }
    else {

            var chart_div = document.getElementById('chart'+id);
            var chart_div1 = document.getElementById('chart1'+id);

            var  chart = new google.visualization.LineChart(chart_div);
            google.visualization.events.addListener(chart, 'select', clickHandler);

            data = new google.visualization.DataTable();
            data.addColumn('string', 'Season Start Date');
            data.addColumn({type: 'string', role: 'annotation'});
            data.addColumn('number', names[0].trim());

            if (value == 2) {
                data.addColumn('number', names[1].trim());
                for (i = 0; i < chart_data.length; i++)
                    data.insertRows(0, [[new Date(chart_data[i].date), parseInt(chart_data[i].val), parseInt(chart_data[i].val1)]]);
        }
        else {
                for (i = 0; i < chart_data.length; i++) {
                    if (!chart_data[i].quarter) {
                        date = chart_data[i].date.split('-');
                        month = getMonthName(date[1]);
                        day = date[2];
                        year = date[0];
                        data.insertRows(0, [[month+' '+day+' '+year , '.' , parseInt(chart_data[i].val) ]]);
                    } else {
                        data.insertRows(0, [[chart_data[i].quarter , '.' , parseInt(chart_data[i].val) ]]);
                    }
                }    
        }
    }
}
if (statData.row[0].type == 'currency') {
    var formatter = new google.visualization.NumberFormat({prefix: '$'});
    formatter.format(data, 1);
} 
    var dataView = new google.visualization.DataView(data);
  dataView.setColumns([
    // reference existing columns by index
    0, 1,
    // add function for line color
    {
      calc: function(data, row) {
        console.log("ok world!");
        var colorDown = '#0000FF';
        var colorUp = 'green';

        if ((row === 0) && (data.getValue(row, 1) < data.getValue(row + 1, 1))) {
          return colorDown;
        } else if ((row > 0) && (data.getValue(row - 1, 1) < data.getValue(row, 1))) {
          return colorDown;
        }
        return colorUp;
      },
      type: 'string',
      role: 'style'
    }
  ]);
    chart.draw(dataView, options);

Answer 1

使用DataView和setColumns来提供确定行方向的函数并返回适当的线条颜色

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  callback: drawLineColors,
  packages: ['corechart']
});

function drawLineColors() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Y');
  data.addRows([
    [0, 2000],
    [3, 1700],
    [6, 1400],
    [9, 2500],
    [12, 3000],
    [15, 4700],
    [18, 2200],
    [21, 1500],
    [24, 1200],
    [27, 1800],
    [30, 2600],
    [33, 2800],
    [36, 3000],
    [39, 2300],
    [42, 2000],
    [45, 4000]
  ]);

  var options = {
    curveType: 'function',
    height: 200,
    legend: {
      position: 'top'
    }
  };

  var dataView = new google.visualization.DataView(data);
  dataView.setColumns([
    // reference existing columns by index
    0, 1,
    // add function for line color
    {
      calc: function(data, row) {
        var colorDown = '#0000FF';
        var colorUp = '#FF0000';

        if ((row === 0) && (data.getValue(row, 1) < data.getValue(row + 1, 1))) {
          return colorDown;
        } else if ((row > 0) && (data.getValue(row - 1, 1) < data.getValue(row, 1))) {
          return colorDown;
        }
        return colorUp;
      },
      type: 'string',
      role: 'style'
    }
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(dataView, options);
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

谷歌折线图：排队时改变颜色

1 个答案: