谷歌图表 - 传奇

时间:2017-10-13 07:24:46

标签: javascript google-visualization

我想改变我的传奇,我必须删除pagging并将所有的标记放在一行或两行中。我想改变图标。

现在看起来像这样

我想要这样的东西

enter image description here

我把scrollArrows:' none'但它不起作用。 这是我在控制器中的代码:

var optionsMobile = {
width: '100%',
height: '100%',
pointSize: 5,
series: {
    pointShape: 'circle'
},
chartArea: {
    width: '80%',
    height: '70%'
},
legend: {
    position: 'bottom',
    textStyle: {
        color: 'white'
    },
    pagingTextStyle: { color: '#666' },
    scrollArrows: 'none'
},
backgroundColor: 'transparent',
titleTextStyle: {
    color: 'white',
    height: "40px"
},
hAxis: {
    textStyle: {
        color: 'white'
    }
},
vAxis: {
    textStyle: {
        color: 'white'
    }
},
};

1 个答案:

答案 0 :(得分:1)

根据configuration options ...

  

legend.maxLines设置为大于1的数字,以便为图例添加线条   此选项目前仅适用于legend.position: 'top'
  注意:用于确定实际渲染的行数的确切逻辑仍在不断变化。

var options = {
  legend: {
    maxLines: 2,
    position: 'top'
  }
};

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

google.charts.load('current', {
    packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'NYCLS 2016 Boys', 'NYCLS 2016 Girls', 'NYCLS 2017 Boys', 'NYCLS 2017 Girls'],
    [1, 10, 15, 20, 25],
    [2, 12, 18, 24, 30],
    [3, 14, 21, 28, 35],
    [4, 16, 24, 32, 40]
  ]);

  var options = {
    legend: {
      maxLines: 2,
      position: 'top'
    },
    width: 360
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>