图中的动态颜色

时间:2014-04-07 12:54:17

标签: javascript jquery morris.js

我尝试使用jquery动态加载颜色。

这是有效的:

 var colors_array= ["#9CC4E4", "#3A89C9", "#F26C4F"];

Morris.Donut({

  element: 'donut-example',
   colors: colors_array,
  data: [
    {label: "Download Sales", value: 12},
    {label: "In-Store Sales", value: 30},
    {label: "Mail-Order Sales", value: 20}
  ]
});

期望的结果(不起作用):

   function graphDonut(colors) {
            var value = colors;
            value = value.replace(/\|/g,'", "');
            var colors_array = '["' + value + '"]';

        Morris.Donut({

          element: 'donut-example',
           colors: colors_array,
          data: [
            {label: "Download Sales", value: 12},
            {label: "In-Store Sales", value: 30},
            {label: "Mail-Order Sales", value: 20}
          ]
        });

    }

graphDonut("#9CC4E4|#3A89C9|#F26C4F");

4 个答案:

答案 0 :(得分:2)

拆分字符串或传递一个数组,后者会更容易

function graphDonut(colors) {

    Morris.Donut({
        element: 'donut-example',
        colors : colors,
        data   : [
            {label: "Download Sales", value: 12},
            {label: "In-Store Sales", value: 30},
            {label: "Mail-Order Sales", value: 20}
        ]
    });
}

graphDonut( ['#9CC4E4', '#3A89C9', '#F26C4F'] );

function graphDonut(colors) {
    var arr = colors.split('|');

    Morris.Donut({
        element: 'donut-example',
        colors : arr,
        data   : [
            {label: "Download Sales", value: 12},
            {label: "In-Store Sales", value: 30},
            {label: "Mail-Order Sales", value: 20}
        ]
    });
}

graphDonut("#9CC4E4|#3A89C9|#F26C4F");

答案 1 :(得分:1)

我认为你需要更换

var colors_array = '["' + value + '"]';

var colors_array = value.split("|");

它给了我这个输出:

["#9CC4E4", "#3A89C9", "#F26C4F"]

希望这有帮助。

答案 2 :(得分:0)

替换以下代码

unlist(dt[1])

我遇到了同样的问题,我正在分享我的更正代码,如下所示

Morris.Donut({

  element: 'donut-example',
   colors: ["#9CC4E4", "#3A89C9", "#F26C4F"],
  data: [
    {label: "Download Sales", value: 12},
    {label: "In-Store Sales", value: 30},
    {label: "Mail-Order Sales", value: 20}
  ]
});

Do nut Chart Colorful view

答案 3 :(得分:0)

试试这个:

<script> 
    new Morris.Donut({
        element: 'donut-example',
        data: [
            {label: "Serie 1", value: 12},
            {label: "Serie 2", value: 30},
            {label: "Serie 3", value: 20},
            {label: "Serie 3", value: 20}
        ],
        colors: ['#a6d000', '#0070e7', '#e700b5', '#ffab17'],
        xkey: 'y',
        ykeys: ['vaue']
    });
</script>