谷歌圖表設置折線圖的行程寬度爲空

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>