图中的动态颜色

Question

我尝试使用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");

Answer 1

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

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");

Answer 2

我想你需要更换

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

同

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

它给了我这个输出：

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

希望这可以帮助。

Answer 3

替换下面的代码

 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} ] }); 

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

  new Morris.Donut({ element: "MyChart", colors: ["#9CC4E4", "#3A89C9", "#F26C4F"], data: object2 }); 

Answer 4

尝试这个：

<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>