折线图颜色的折线图和数据标记

时间:2019-12-20 15:52:02

标签: charts google-visualization google-chartwrapper

我在这里有此代码

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

    var options = {
        title: 'Reparation par RSP',
        width: '100%',
        height: 500,
        bar: { groupWidth: "75%" },
        seriesType: 'bars',
        series: { 5: { type: 'line' } },
        colors: ['#dacfcf','#fee812','#ff7900','#ff0000','#ff0000','black'],
        legend: 'right',
        curveType: 'function',
        isStacked: true,

        hAxis: { format: '###' },
        titleTextStyle: {
            fontSize: 32,
        },
    };

    $.ajax({
        type: "POST",
        url: "ReparationParRSP.aspx/GetChartData",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
             var data = new google.visualization.DataTable({
              "cols": [
                {"label": "Nome", "type": "string"},
                {"label": "0_2H", "type": "number"},
                {"label": "2_4H", "type": "number"},
                {"label": "4_8H", "type": "number"},
                {"label": "8_24H", "type": "number"},
                { "label": "+24H", "type": "number" },
                {"label": "Totale", "type": "number"}
              ]
            });

            data.addRows(r.d);

            var view = new google.visualization.DataView(data);
            view.setColumns([0,
    1, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 1);}, type: "string", role: "annotation"},
    2, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 2);}, type: "string", role: "annotation"},
    3, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 3);}, type: "string", role: "annotation"},
    4, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 4);}, type: "string", role: "annotation"},
    5, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 5);}, type: "string", role: "annotation"},
    6, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 6);}, type: "string", role: "annotation"}
            ]);

  function getAnnotation(dataTable, rowIndex, columnIndex) {
    return dataTable.getFormattedValue(rowIndex, columnIndex) || null;
  }

            var chart = new google.visualization.BarChart($("#chart_div")[0]);
            chart.draw(view, options);
           //updateChart();
        },
        failure: function (r) {
            alert(r.d);
        },
        error: function (r) {
            alert(r.d);
        }
    });

在这里看到

series: { 5: { type: 'line' } } 

系列编号6是所有其他系列的总和,是一个线系列,另一个系列是列系列, 问题是我只想显示数字(数据标记)而不显示行,当我给线系列赋予透明色时,数字也取为透明色, 所以有什么办法可以给数据标记提供不同的颜色,为折线图赋予透明的颜色?

1 个答案:

答案 0 :(得分:0)

将线宽设置为零...

series: {
  5: {
    type: 'line',
    lineWidth: 0
  }
}