C3js：单一数据中的多色线

问题描述

我有C3.js折线图，并且已经在其中实现了一些自定义设计更改，并且到目前为止工作正常。 我无法实现以下设计更改：

a）不同点的多色线。 （例如，下面的图表中：100-200：颜色：红色，200-100：颜色：蓝色，100-400：颜色：橙色，400-150：颜色：粉红色，150-250：颜色：绿色，250- 120：颜色：棕色，120-200：颜色：黑色；）

b）我要在其上进行部分颜色渐变，即从我目前的低于100的数据来看，它应该是白色。

P.S我还要附上一张示例图片，以期更好地理解。对于点“ a”：我用红色墨水标记，对于点“ b”：我用黑色的笔标记。 提前致谢。 Expected Design

var grad1 =
  '<linearGradient id="grad1" x1="50%" y1="0%" x2="50%" y2="100%">' +
  '  <stop offset="0%" style="stop-color:#E6ECFF;stop-opacity:1" />' +
  '  <stop offset="40%" style="stop-color:#E6ECFF;stop-opacity:1" />' +
  '  <stop offset="100%" style="stop-color:#E6ECFF;stop-opacity:1" />' +
  '</linearGradient>';


var chart = c3.generate({
  data: {
    columns: [
      ['sample',100,200,400,150,250,120,200]
    ],types: {
      sample: 'area'
    },colors: {
      sample: 'url(#grad1)'
    }
  },oninit: function() {
    this.svg[0][0].getElementsByTagName('defs')[0].innerHTML += grad1;
  },grid: {
    x: {
      show: false
    },y: {
      show: true
    }

  },point: {
    r: 5
  },});

.c3 .c3-axis-x path,.c3 .c3-axis-x line {
  stroke: #052f5f1a;
}

.c3-axis-y text,.c3-axis-x text {
  fill: #052F5F;
  font-size: 12px;
  opacity: 0.4;
  font-weight: 600;
}

.c3 .c3-axis-y path,.c3 .c3-axis-y line {
  display: none;
}

circle {
  stroke: #fff;
  stroke-width: 2px;
  fill: #501DF8 !important;
}

.c3 g.c3-shapes.c3-lines path {
  stroke: #5850D6 !important;
  stroke-width: 2px;
}

.c3-grid line {
  stroke: #052F5F;
  opacity: 0.2;
}

.c3-xgrid-focus {
  stroke: #979797 !important;
  stroke-dasharray: 5,5;
  stroke-width: 2px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.11/c3.css" integrity="sha512-VYsPnk6xiH1iL282B+F0FfCXy+C4LJIXpzdYQUa3fG7iyeFFLHkuM9cOXYouDkOHOANGuBtxFjPg3DloZBO6eQ==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="chart"></div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）