Google 图表折线图选项不完全有效（双 y-axis）

Question

我在 D3 中构建了多个图表，但应客户要求，我开始使用 Google 图表。到目前为止，我非常喜欢它，但我无法获得正确工作的选项。

我正在彻底使用 angular-google-chart and I double checked that the options are getting passed to the google api correctly, and they are. I also read the line chart docs，所以我非常确信语法是正确的，但如果您发现以下数据有任何问题，请告诉我。

有几个选项不起作用，但特别是 vAxis 选项中的 none 起作用；其中最重要的是 y-axis 标题未显示。

我注意到折线图 api 有点挑剔。例如，我把整个图表标题变大了，它只是随机停止显示顶部图例，所以我不得不把它改回来。我希望有某种文件概述了每个选项更改的权衡。

请注意，我试图显示两个 y-axes。

$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: {}
    }

Answer 1

我认为您遇到了一个相当普遍的陷阱。使用 dual-y 时，需要将 vAxis 更改为 vAxes。除此之外，看起来还不错。

感谢您使用 angular-google-chart，顺便说一下！