首页 文章

Google Charts LineChart选项不完全正常工作(双y轴)

提问于
浏览
1

我在D3中构建了几个图表但是在客户要求我开始使用谷歌图表 . 到目前为止,我非常喜欢它,但我无法让选项正常工作 .

我正在使用angular-google-chart并且我仔细检查了选项是否正确传递给谷歌api,他们是 . 我也彻底阅读了line chart docs,所以我非常有信心语法是正确的,但是如果您发现以下数据存在任何问题,请告诉我 .

有几个选项不起作用,但特别是,没有一个vAxis选项正常工作;其中最重要的是y轴 Headers 没有显示 .

我注意到线图api有点挑剔 . 例如,我使整个图表 Headers 更大,它只是随机停止显示顶部图例,所以我不得不改回来 . 我希望有一些文件概述了每个选项变更的权衡 .

请注意,我试图显示两个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: {}
    }

1 回答

  • 1

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

    顺便说一句,感谢您使用角度 - 谷歌图表!

相关问题