6

我到处搜索，似乎找不到答案。本质上，我正在创建一个包含许多（超过 2 个）Y 轴的 Google 图表。图表允许您执行此操作，但它们将 Y 轴的各种值组合在一起（参见下面的示例 1）。

我使用了另一项服务 HighCharts，并且能够很容易地完成此操作（请参见下面的示例 2）。如果有人知道如何使用 Google Charts 完成此任务，我将不胜感激。

示例 1（谷歌图表）：http ://austincjenkins.com/1.html

代码：

<html>
  <head>
    <style>
      #chart_div {
          background-color: #999;
          border: 3px solid #000;
          border-radius: 20px;
          width: 750px;
          height: 500px;
          padding: 5px;
      }
      .left-margin {
          margin-left: 20px;
      }
     </style>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Time', 'Rate', 'Ratio1', 'Total', 'Productivity', 'Percent'],
            ['Jan-12',  300,  1000,  1000,  600,  2],
            ['Feb-12',  200,  1200,  2000,  700,  5],
            ['Mar-12',  150,  1300,  3000,  650,  8],
            ['Apr-12',  100,  1400,  4000,  700,  10],
            ['May-12',  85,  1500,  5000,  600,  12],
            ['Jun-12',  90,  1600,  6000,  700,  31],
            ['Jul-12',  60,  1700,  7000,  600,  20],
            ['Aug-12',  45,  1800,  8000,  700,  15],
            ['Sep-12',  65,  1900,  9000,  650,  28],
            ['Oct-12',  35,  2000,  10000,  700,  35],
            ['Nov-12',  40,  2100,  11000,  600,  45],
            ['Dec-12',  31,  2200,  12000,  700,  55],
            ['Jan-13',  28,  2300,  13000,  600,  55],
            ['Feb-13',  22,  2400,  14000,  700,  55],
            ['Mar-13',  18,  2500,  15000,  650,  45],
            ['Apr-13',  15,  2600,  16000,  700,  60],
            ['May-13',  16,  2700,  17000,  600,  60]        
        ]);

         var options = {           
            title: '',  // Here you can give the graph a title and position it         
            chartArea:{ // Here we can customize the size of the positioning and size of the chart
                top: 10,
                backgroundColor: "#fff",
                width: "75%",
                heigh: "75%"
            },
            fontSize: '', // Enter a number here if you'd like to adjust the font size of ALL the elements in the graph
            //fontName: '', // Enter the name of a font here if you'd like to change the default
            backgroundColor: { // Here we can customize the background of the chart
                fill: "transparent" 
            }, 
            curveType: "function", // can also be "function" to smooth out lines
            hAxis: { // Here we can stylize the X-Axis
                //title: 'Period',  
                slantedText: 'true',
                showTextEvery: 1,
                //titleTextStyle: { // This stylizes the X-axis title ("Period")
                //  color: 'black', 
                    //fontName: '', 
                //  fontSize: 20
                //}
            },
            legend: {
                position: "bottom",
                alignment: "center",
                background: "#fff"
            },  // Here we can customize and position the 
            // The following allows us to customize the series points.
            series:[
                // "RATE"
                {targetAxisIndex:0, color: "red", pointSize: 8, visibleInLegend: true}, 
                // "Ratio1"
                {targetAxisIndex:1, color: "blue", pointSize: 8, visibleInLegend: true, offset: 20}, 
                // Total
                {targetAxisIndex:2, color: "orange", pointSize: 8, visibleInLegend: true}, 
                // Productivity
                {targetAxisIndex:3, color: "black", pointSize: 8, visibleInLegend: true}, 
                // Percent
                {targetAxisIndex:4, color: "green", pointSize: 8, visibleInLegend: true}
            ],
            vAxes:[  // Here we can customize the Y-Axes
                { // Left axis
                        left: 50,
                    titleTextStyle: { // This stylizes the X-axis title ("Period")
                        color: 'black', 
                        //fontName: '', 
                        fontSize: 20,
                    }
                }, 
                { // Right axis
                    title: "Total",
                    titleTextStyle: { // This stylizes the X-axis title ("Period")
                        color: 'black', 
                        //fontName: '', 
                        fontSize: 20
                    }
                } 
            ]
         };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"</div>
  </body>
</html>

示例 2（HighCharts）：http ://austincjenkins.com/2.html

4

0 回答 0