Question

我在D3中建立了几个图表，但在客户要求我开始使用Google Charts。到目前为止，我非常喜欢它，但我无法让选项正常工作。

我正在使用angular-google-chart并且我仔细检查了选项是否正确传递给google api，他们是。我还彻底阅读了line chart docs，因此我非常确信语法是正确的，但如果您发现以下数据存在任何问题，请与我们联系。

有几个选项不起作用，但特别是，没有一个vAxis选项正在运行;其中最重要的是y轴标题没有显示。

我注意到线图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: {}
    }

Answer 1

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

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

Google Charts LineChart选项不完全正常工作（双y轴）

1 个答案: