如何更改谷歌折线图的外观

Question

有没有办法改变谷歌图表的UI或设计。我希望我的图表看起来像

http://www.flickr.com/photos/41695354@N08/6020984362/in/photostream/

Answer 1

首先，您需要加载正确的图表API。对于折线图，

 <script> google.load("visualization", "1", {packages:["corechart"]}); </script>

然后像这样设置图表选项

chart.draw(data, {width: X, height: Y, title: <graph Title>, pointSize:4, legend:bottom,
      hAxis: {title:  <x-axis title>, titleTextStyle: {color: 'red'}},
  vAxis: {title: <Y-axis title>,  titleTextStyle: {color: 'red'}}
});

您可以更改pointSize的值，以增加或减少图表上的值点。如果您不希望点在图表上显示，请删除pointSize选项。

Google会自动为您拥有的不同数据分配颜色。可以选择特定的颜色

Answer 2

要更改数据系列，折线图等的颜色，请使用以下代码：

var options = {
    title: 'My Chart',
    series: {0:{color:'F38921',lineWidth:2}}
};

Answer 3

如果您想更改颜色，请查看此颜色选择器，以便在Google可视化图表/图表上预览不同的主题

http://www.philipwhitt.com/projects/google-visualization-theme-picker

选择所需的颜色列表，然后将它们放入颜色选项中，如下所示：

var chartOptions = {
  title: 'Some Title',
  colors: ['#657CD0','#DA68A0','#06C3C0','#777B80','#7C6D70','#7C0850','#F75870']
};

Answer 4

根据您提供的图片链接，您可以通过Google Chart API选项完成所需的自定义设置（例如，在底部设置图例，设置列/系列颜色）

如果您想配置信息中心的外观，您可以（i）调整http://battlehorse.github.com/google-charts-controls-gallery/#google-visualization-controls-theme-plus的Google图表CSS主题，这将自定义图表本身（ii）参考ThemeForest Google图表主题，例如{ {3}}，但大多数只配置实际图表之外的外观。