javascript - Morris.js折れ線グラフでドットポイントの色とスタイルを変更するには?

Question

morris.jsを使用して折れ線グラフを描画していますが、折れ線グラフのドットの色とスタイルだけを変更する方法がわかりません。ドットスタイルだけを変更する方法を知っている人はいますか?

ありがとう。

Answer 1

プロパティを使用しpointFillColorsます。ドキュメントから：

pointFillColors 系列ポイントの色。デフォルトでは、lineColors と同じ値を使用します

青い線と緑の点を含むグラフの例を次に示します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="morris.min.js"></script>
<script type="text/javascript">
function drawChart() {
    Morris.Line({
        element: 'chart',
        data: [
            {y: '2012', a: 100},
            {y: '2011', a: 75},
            {y: '2010', a: 50},
            {y: '2009', a: 75},
            {y: '2008', a: 50},
            {y: '2007', a: 75},
            {y: '2006', a: 100}
        ],
        xkey: 'y',
        ykeys: ['a'],
        labels: ['Test series'],
        lineColors: ['#0b62a4'],
        pointFillColors: ['#00ff00']
    });
}

window.onload = drawChart;
</script>
<div id="chart" style="width: 400px; height: 250px;"></div>

Answer 2

「lineColors」の代わりに、次のような「colors」を試してください。

function drawChart() {
Morris.Line({
    element: 'chart',
    data: [
        {y: '2012', a: 100},
        {y: '2011', a: 75},
        {y: '2010', a: 50},
        {y: '2009', a: 75},
        {y: '2008', a: 50},
        {y: '2007', a: 75},
        {y: '2006', a: 100}
    ],
    colors: ['#0b62a4','#D58665','#37619d','#fefefe','#A87D8E','#2D619C','#2D9C2F']
});

}

すべての行に 1 つの色が必要です。