【发布时间】：2015-09-12 16:35:21
【问题描述】：
我在 D3 中构建了几个图表，但应客户要求，我开始使用 Google Charts。到目前为止，我非常喜欢它，但我无法让选项正常工作。
我正在使用angular-google-chart，我仔细检查了选项是否正确传递给了 google api，并且确实如此。我还彻底阅读了line chart docs，因此我非常确信语法是正确的，但如果您发现以下数据有任何问题，请告诉我。
有几个选项不起作用，尤其是 vAxis 选项都不起作用；其中最重要的是没有显示 y 轴标题。
我注意到 linechart api 有点挑剔。例如，我把整个图表的标题变大了，它只是随机停止显示顶部图例，所以我不得不把它改回来。我希望有某种文件概述每个选项更改的权衡。
请注意，我正在尝试显示两个 y 轴。
$scope.chartObject = {
type: "LineChart", //https://developers.google.com/chart/interactive/docs/gallery/linechart
data: {
cols: [
{
id: "days",
label: "Days",
type: "number", //supports boolean, number, string, date, datetime, timeofday
p: {}
},
{
id: "obj",
label: "Objects",
type: "number",
},
{
id: "recommended",
label: "Recommended",
type: "number",
},
{
id: "used",
label: "Used",
type: "number",
p: {}
},
],
rows: [
{
c: [
{v: 7},
{v: 19,},
{v: 12,},
{v: 12,},
]
},
{
c: [
{v: 6},
{v: 13},
{v: 1,},
{v: 1,},
]
},
{
c: [
{v: 5},
{v: 24},
{v: 5},
{v: 5},
]
},
{
c: [
{v: 4},
{v: 24},
{v: 5},
{v: 5},
]
},
{
c: [
{v: 3},
{v: 24},
{v: 5},
{v: 5},
]
},
{
c: [
{v: 2},
{v: 24},
{v: 5},
{v: 5},
]
},
{
c: [
{v: 1},
{v: 24},
{v: 5},
{v: 5},
]
},
]
},
options: {
title: "Inputs",
titleTextStyle: {
color: '#728292', //$darkGreyAccent
bold: false,
//fontSize: 20,
},
axisTitlesPosition: 'out',
animation: {
duration: 1000,
startup: true,
},
backgroundColor: {
stroke: 'grey',
strokeWidth: 0,
},
forceIFrame: true,
legend: {
position: 'top',
alignment: 'right',
},
chartArea: {
width: '80%',
height: '300px',
left: '10%',
},
width: '100%',
tooltip: {
trigger: 'selection',
},
colors: ['#003D78', '#D34400','#00AB6F', '#FFC300', '#5A8FC3'],
hAxis: {
title: "Days",
baselineColor: '#95A1AA',
textStyle: {
color: '#728292',
},
textPosition: 'out',
gridlines: {
color: 'transparent',
},
direction: -1,
},
pointSize: 10,
vAxis: {
0: {
title: "Objects",
titleTextStyle: {
color: '#728292', //$darkGreyAccent
},
textPosition: 'out',
baseline: 2,
baselineColor: '#D34400', //$red
gridlines: {
count: 10,
color: '#ECF0F1', //$lightGreyAccent
},
textStyle: {
color: '#728292', //$darkGreyAccent
},
minValue: 0,
viewWindow: {
min: 0,
},
},
1: {
title: "OD SPan Days",
titleTextStyle: {
color: '#D34400', //$red
},
textPosition: 'out',
textStyle: {
color: '#D34400', //$red
},
baselineColor: '#D34400', //$red
baseline: 0,
minValue: 0,
viewWindow: {
min: 0,
},
},
},
series: {
0: {
pointShape: 'circle',
targetAxisIndex: 0
},
1: {
pointShape: 'triangle',
lineDashStyle: [4, 4],
targetAxisIndex: 1
},
2: {
pointShape: 'star',
dent: .02,
lineWidth: 0,
targetAxisIndex: 1,
},
}
},
formatters: {}
}
【问题讨论】：
标签： javascript angularjs linechart google-visualization