Google Charts LineChart自定義點

Question

是否可以將自定義點形狀添加到折線圖？

Google的Customizing Points Documentation沒有提及添加它們尚未提供的形狀的任何信息。

我的確找到了這個similar question的一個很好的答案，但我不認爲我可以使用angular-google-chart來做到這一點。即使有可能，我也希望有一個更加困難的解決方案。

我不需要添加複雜的形狀，我只需要一個空心圓和一個X。

我嘗試添加使用筆畫顏色和筆畫寬度作爲列樣式的空心圓，但我甚至無法使其工作。

這裏是一個jsFiddle with a working hollow circle但我使用添加數據的Javascript文字的方式並不能得到下面的代碼工作：

chartData.data.cols = [ 
     { 
      id: "someid", 
      label: "Some Label", 
      type: "number", 
      p: { 
       style: 'point {stroke-width: 4; stroke-color: #000000', 
      }, 
     }, 
    ]; 

我寧願把它添加到到options.series [0] .strokeWidth但它看起來不是那種選擇。

所以，如果你可以幫助空心圓點或X是真棒！

Answer 1

基本上：當您想要應用自定義樣式時，您必須使用樣式列，樣式將通過列的值進行設置。使用

實例對象字面：

google.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var chartData = { 
 

 
    data: { 
 

 
     cols: [{ 
 

 
      label: "X", 
 
      type: "number" 
 
     }, { 
 
      label: 'Y', 
 
      type: "number" 
 
     }, { 
 
      role: 'style', 
 
      type: "string" 
 
     } 
 

 
     ], 
 
     rows: [{ 
 
     c: [{ 
 
      v: 1 
 
     }, { 
 
      v: 5 
 
     }, { 
 
      v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}' 
 
     }] 
 
     }, { 
 
     c: [{ 
 
      v: 2 
 
     }, { 
 
      v: 1 
 
     }, { 
 
      v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}' 
 
     }] 
 
     }, { 
 
     c: [{ 
 
      v: 3 
 
     }, { 
 
      v: 3 
 
     }, { 
 
      v: 'point { stroke-width: 4; fill-color: transparent; stroke-color: red;}' 
 
     }] 
 
     }] 
 
    } 
 
    }; 
 
    
 
    var options = { 
 
    legend: 'none', 
 
    curveType: 'function', 
 
    pointSize: 7 
 

 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    chart.draw(new google.visualization.DataTable(chartData.data), options); 
 
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> 
 
<div id="chart_div"></div>

如果你使用多個vaxes再加入與角色列：立即柱後要「風格」樣式。

另一種解決方案：

通過CSS設置圓的風格：

google.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var chartData = { 
 

 
    data: { 
 

 
     cols: [{ 
 

 
      label: "X", 
 
      type: "number" 
 
     }, { 
 
      label: 'Y', 
 
      type: "number" 
 
     }, { 
 
      label: 'Y', 
 
      type: "number" 
 
     } 
 

 
     ], 
 
     rows: [ 
 
      {c:[{v:1}, {v:5}, {v:4}]}, 
 
      {c:[{v:2}, {v:1}, {v:2}]}, 
 
      {c:[{v:3}, {v:3}, {v:5}]} 
 
      ] 
 
    } 
 
    }; 
 

 

 
    var options = { 
 
    curveType: 'function', 
 
    pointSize: 7, 
 
    series: { 
 
     //set unique colors for the series when you must set 
 
     //different points for mmultiple series 
 
     0: { 
 
     color: 'ff0000' 
 
     }, 
 
     1: { 
 
     color: '#0000ff' 
 
     } 
 
    } 
 

 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    chart.draw(new google.visualization.DataTable(chartData.data), options); 
 
}

#chart_div circle { 
 
    stroke-width: 4px !important; 
 
    fill: none !important; 
 
} 
 
#chart_div circle[fill="#ff0000"] { 
 
    stroke: #ff0000 !important; 
 
} 
 
#chart_div circle[fill="#0000ff"] { 
 
    stroke: #0000ff !important; 
 
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> 
 
<div id="chart_div" ></div>

Answer 2

莫爾博士的回答似乎爲得到一個空心圓工作，雖然點與傳說不符。

我想出了一個解決X點問題的方法。我用options.pointshape給明星4個邊，旋轉45度，並降低了凹痕：

pointShape: { 
    type: 'star', 
    sides: 4, 
    dent: 0.1, 
    rotation: 45, 
}, 

希望有一個更好的辦法，但醫生莫勒的和這個答案的工作現在。

Answer 3

無論誰在使用Dr.莫爾的輝煌CSS解決方案而且正在經歷一個問題，第二個數據系列點消失只是使第二顏色默認顏色：

#chart_div circle { 
    stroke-width: 4px !important; 
    fill: #ffffff !important; // note that i'm not using transparent 
    stroke: #0000ff !important; // second color moved to be default 
} 
#chart_div circle[fill="#ff0000"] { 
    stroke: #ff0000 !important; 
} 
#chart_div circle[fill="#0000ff"] { 
    /*stroke: #0000ff !important;*/ 
} 

**注：不能寫爲Dr.Molle的評論由於當時沒有足夠的聲譽而回答。