Question

我正在建立一个图表，该图表根据（日期）的用户输入重新生成新数据。添加区域后，它们不会替换或删除我需要它们执行的先前区域。

正在从PHPStorm运行。我试过chart.regions.remove（）但什么也没有删除。 chart.regions.add（）可以正常工作。

chart.regions.remove(regionsArray);
resetRegions();
chart.regions.add(
    regionsArray
);

/*
Where chart is my chart, regionsArray is initially the array of current regions. resetRegions() assigns the correct wanted region values to regionsArray. After resetRegions() regionsArray only contains the wanted regions and not the old regions too.
*/

我希望图形仅显示新区域，而同时显示新区域和旧区域。

Answer 1

您可以执行以下操作-首先，让我们调用c3以生成包含区域的图表：

var chart = c3.generate({
   bindto: '#c3_chart',
     data: {
       columns: [
         ['data1', 100, 200, 150, 300, 200],
         ['data2', 200, 150, 25, 250, 100],
       ],
     },
    regions: [
          {start: 0, end: 1, opacity:0.2},
          {start: 2, end: 3, opacity:0.2}
   ];
});

然后，我们可以使用以下功能（此处结合用于演示目的的超时）将新的区域替换为旧区域：

var c3rgn = document.getElementById(".c3-region");  
setTimeout(function () {
  chart.regions.remove(c3rgn);
     chart.regions.add(
        [
          {start: 1, end: 2, opacity:0.2}
        ]
     );
}, 2000);

我创建了一个小提琴供您测试：http://jsfiddle.net/vbn4tquz/

下面是完整的代码和可执行代码段：

var chart = c3.generate({
     bindto: '#c3_chart',
     data: {
       columns: [
         ['data1', 100, 200, 150, 300, 200],
         ['data2', 200, 150, 25, 250, 100],
       ],
     },
		regions: [
          {start: 0, end: 1, opacity:0.2},
          {start: 2, end: 3, opacity:0.2}
    ],
});

// This function replaces the old regions

var c3rgn = document.getElementById(".c3-region");  
setTimeout(function () {
  chart.regions.remove(c3rgn);
     chart.regions.add(
        [
          {start: 1, end: 2, opacity:0.2}
        ]
     );
}, 3500);

.c3 svg {
  font: 10px sans-serif
}

.c3 line,
.c3 path {
  fill: none;
  stroke: #000;
}

.c3 text {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.c3-bars path,
.c3-event-rect,
.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid {
  shape-rendering: crispEdges
}

.c3-chart-arc path {
  stroke: #fff
}

.c3-chart-arc text {
  fill: #fff;
  font-size: 13px
}

.c3-grid line {
  stroke: #aaa
}

.c3-grid text {
  fill: #aaa
}

.c3-xgrid,
.c3-ygrid {
  stroke-dasharray: 3 3
}

.c3-text.c3-empty {
  fill: gray;
  font-size: 2em
}

.c3-line {
  stroke-width: 1px
}

.c3-circle._expanded_ {
  stroke-width: 1px;
  stroke: #fff
}

.c3-selected-circle {
  fill: #fff;
  stroke-width: 2px
}

.c3-bar {
  stroke-width: 0
}

.c3-bar._expanded_ {
  fill-opacity: .75
}

.c3-target.c3-focused {
  opacity: 1
}

.c3-target.c3-focused path.c3-line,
.c3-target.c3-focused path.c3-step {
  stroke-width: 2px
}

.c3-target.c3-defocused {
  opacity: .3!important
}

.c3-region {
  fill: #4682b4;
  fill-opacity: .1
}

.c3-brush .extent {
  fill-opacity: .1
}

.c3-legend-item {
  font-size: 12px
}

.c3-legend-item-hidden {
  opacity: .15
}

.c3-legend-background {
  opacity: .75;
  fill: #fff;
  stroke: #d3d3d3;
  stroke-width: 1
}

.c3-tooltip-container {
  z-index: 10
}

.c3-tooltip {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  empty-cells: show;
  -webkit-box-shadow: 7px 7px 12px -9px #777;
  -moz-box-shadow: 7px 7px 12px -9px #777;
  box-shadow: 7px 7px 12px -9px #777;
  opacity: .9
}

.c3-tooltip tr {
  border: 1px solid #CCC
}

.c3-tooltip th {
  background-color: #aaa;
  font-size: 14px;
  padding: 2px 5px;
  text-align: left;
  color: #FFF
}

.c3-tooltip td {
  font-size: 13px;
  padding: 3px 6px;
  background-color: #fff;
  border-left: 1px dotted #999
}

.c3-tooltip td>span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px
}

.c3-tooltip td.value {
  text-align: right
}

.c3-area {
  stroke-width: 0;
  opacity: .2
}

.c3-chart-arcs-title {
  dominant-baseline: middle;
  font-size: 1.3em
}

.c3-chart-arcs .c3-chart-arcs-background {
  fill: #e0e0e0;
  stroke: none
}

.c3-chart-arcs .c3-chart-arcs-gauge-unit {
  fill: #000;
  font-size: 16px
}

.c3-chart-arcs .c3-chart-arcs-gauge-max,
.c3-chart-arcs .c3-chart-arcs-gauge-min {
  fill: #777
}

.c3-chart-arc .c3-gauge-value {
  fill: #000
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js">
</script>

<body>
<br><br>

<div id="c3_chart" style="width: 95%; height: 250px"></div>
</body>

有没有办法替换c3中的区域？

1 个答案: