谷歌图表设置折线图的行程宽度为空

Question

我目前正面临谷歌图表的一个问题，它看起来相当简单。所有我需要的是删除当前图表的行程宽度：

，使它看起来像下面的图表：

我所拥有的是一个堆积面积图，所以选项设置如下：

var options = { 
    'title': '', 
    isStacked: true, 
    legend: { 
     textStyle: { fontSize: '16' }, 
     position: 'top' 
    }, 
    hAxis: { 
     title: '', 
     gridlines: { 
      color: '#000000', //Note: 'count: 4' attribute is only possible for continuous...so try to find a way for non-continuous h axis 
     }, 
     textStyle: { 
      fontName: 'Arial', 
      fontSize: '18' 
     } 
     //ticks: [0, 100, 200, 75, 100] // display labels every 25 
    }, 
    vAxis: { 
     title: '', 
     gridlines: { 
      color: '#D3D3D3', 
      count: 10, 
      //lineDashStyle: [2,2] 
     }, 
     textStyle: { 
      fontName: 'Arial', 
      fontSize: '18' 
     }, 
     viewWindow: { max: range_max, min: range_min } //TODO: make them generable 
     //showTextEvery: 100 
    }, 
    'width': 1100, //100% //TODO: make this relative 
    'height': 600, 
    crosshair: 
    { 
     trigger: 'both' 
    }, 
    series: 
    { 
     0: { pointSize: 8 }, 
     3: { lineDashStyle: [5, 1, 3] }, 
     4: { type: 'area', color: 'transparent'}, //visibleInLegend: false 
     5: { type: 'area', backgroundColor: { strokeWidth: 0 } } // color: 'transparent' 
    }, 
    intervals: { 'style': 'line' }, 
    colors: ['#ff0000', '#000000', '#0000ff', '#000000', '#000000', '#000000'] 
} 

但是strokeWidth属性似乎并没有工作。有什么建议，我做错了请吗？

Answer 1

使用样式列，您可以自定义每个系列分别

它适用于所有Column Roles，相同的（注释，风格等...）

的作用被应用到以往一系列列它遵循

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'], 
 

 
     // add same style for each point, series 1 only 
 
     ['2013', 1000, 400, 'stroke-width: 0;', 200, 400], 
 
     ['2014', 1170, 460, 'stroke-width: 0;', 200, 400], 
 
     ['2015', 660, 1120, 'stroke-width: 0;', 200, 400], 
 
     ['2016', 1030, 540, 'stroke-width: 0;', 200, 400] 
 
    ]); 
 

 
    var options = { 
 
     isStacked: true, 
 
     title: 'Company Performance', 
 
     hAxis: { title: 'Year', titleTextStyle: { color: '#333' } }, 
 
     vAxis: { minValue: 0 }, 
 
     series: 
 
     { 
 
     0: { id: 'ss223', type: 'area', color: 'transparent' }, 
 
     1: { type: 'area', color: 'black' }, 
 
     2: { type: 'line', color: 'red' }, 
 
     3: { type: 'line', color: 'blue' } 
 
     } 
 
    }; 
 

 
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
    }, 
 
    packages:['corechart'] 
 
});

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

编辑

问题与上面的例子中，传说是现在不同步的系列风格

用图表的'ready'事件纠正图例项，
黑线会是一个path元素

根据使用的样式，逻辑可能需要调整，但在这里工作

在容器中发现的元素会在相同的顺序数据

见下工作片断纠正图例项...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Year', 'Sales', 'Expenses', {type: 'string', role: 'style'}, 'Line 1', 'Line 2'], 
 

 
     // add same style for each point, series 1 only 
 
     ['2013', 1000, 400, 'stroke-width: 0;', 200, 400], 
 
     ['2014', 1170, 460, 'stroke-width: 0;', 200, 400], 
 
     ['2015', 660, 1120, 'stroke-width: 0;', 200, 400], 
 
     ['2016', 1030, 540, 'stroke-width: 0;', 200, 400] 
 
    ]); 
 

 
    var options = { 
 
     isStacked: true, 
 
     title: 'Company Performance', 
 
     hAxis: { title: 'Year', titleTextStyle: { color: '#333' } }, 
 
     vAxis: { minValue: 0 }, 
 
     series: 
 
     { 
 
     0: { id: 'ss223', type: 'area', color: 'transparent' }, 
 
     1: { type: 'area', color: 'black' }, 
 
     2: { type: 'line', color: 'red' }, 
 
     3: { type: 'line', color: 'blue' } 
 
     } 
 
    }; 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.ComboChart(container); 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
     Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) { 
 
     if (path.getAttribute('stroke') === '#000000') { 
 
      path.setAttribute('stroke', 'transparent'); 
 
     } 
 
     }); 
 
    }); 
 

 
    chart.draw(data, options); 
 
    }, 
 
    packages:['corechart'] 
 
});

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