谷歌圖表LineChart選項不完全工作（雙y軸）

Question

我已經在D3中建立了幾個圖表，但在客戶端請求我開始使用谷歌圖表。到目前爲止，我非常喜歡它，但我無法讓選項正常工作。

我使用的是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: {} 
    } 

Answer 1

我覺得你遇到了一個相當常見的陷阱。當您使用dual-y時，您需要將vAxis更改爲vAxes。除此之外，看起來不錯。

感謝您使用角度谷歌圖表，順便說一句！