1

如何使用 AnyChart 生成自定义颜色？

这就是我到目前为止所拥有的。我已经评论了该行，它指的是调色板 - '试图在此处影响调色板'。

anychart.onDocumentReady(function () {

  //Trying to affect palette here
  //led.palette = anychart.palettes.earth;

  // create a stage
  stage = anychart.graphics.create("diagramContainer");

  // create data
  var data = [170, 210, 130, 310];

  // set the gauge type
  led = anychart.gauges.led();

  // set data for the gauge
  led.data(data);

  // add the default pointer
  led.addPointer(2);

  // set the size and position
  led.bounds("50%", 0, "25%", "100%");

  // sets background settings.
  led.background({fill: "#FFFFFF 0.0"});

  // sets left bound.
  led.left("28%");

  // sets height.
  led.height("35%");

  // set the container id
  led.container(stage);

  // initiate the gauge drawing
  led.draw();

});

4

3 回答 3

0

调色板不是一个属性，它是一种方法，就像 AnyChart 中的几乎所有东西一样，它是如何完成的：http: //jsfiddle.net/0vhvnjqp/

// apply palette
led.palette(anychart.palettes.earth);
于 2016-11-18T09:27:37.050 回答
0

我认为您可以直接修改现有调色板中的颜色项：

  let palette = anychart.palettes.distinctColors();
  palette.items(
      ['#00FF00', '#FFFF00', '#FFA500', '#FF0000','#F0F0F0', '#101010']
  );
  // create a tag cloud chart
  var chart = anychart.tagCloud(data);
  chart.background({fill: "#2F2F2F 3.5"});
  chart.palette(palette);
  //...
  chart.draw()
于 2020-06-20T23:06:40.193 回答
0

这是anychart中带有自定义颜色的完整代码

<!doctype html>
<html>
<head>
  <script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css" />
  <style>
    html, body, #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript">
anychart.onDocumentReady(function() {
  // create column chart
  chart = anychart.column3d();
  chart.background({fill: "#000000 3.5"});
  //chart.Color("blue");
  // turn on chart animation
  chart.animation(true);

  // set chart title text settings
  chart.title('Top 10 Cosmetic Products by Revenue');

  // create area series with passed data
  chart.column([
    ['Rouge', '80'],
    ['Foundation', '9'],
    ['Mascara', '10'],
    ['Lip gloss', '11'],
    ['Pomade', '12'],
    ['Nail polish', '14'],
    ['Eyebrow pencil', '17'],
    ['Eyeliner', '21'],
    ['Eyeshadows', '24']
  ]).fill('red');

  chart.tooltip()
    .position('top')
    .anchor('bottom')
    .offsetX(0)
    .offsetY(5)
    .format('{%Value}%');

  // set scale minimum
  chart.yScale().minimum(0);

  // set yAxis labels formatter
  chart.yAxis().labels().format('{%Value}{groupsSeparator: }');

  chart.tooltip().positionMode('point');
  chart.interactivity().hoverMode('byX');

  chart.xAxis().title('Products by Revenue');
  chart.yAxis().title('Revenue in Dollars');

  // set container id for the chart
  chart.container('container');
  var yLabels1 = chart.yAxis().labels();
    yLabels1.format(function(){
      return this.value + "%";
    });
  // initiate chart drawing
  chart.draw();
});
    </script>
</body>
</html

>

于 2017-09-23T18:02:08.530 回答