时间戳

首页 > 解决方案 > 有没有办法替换 c3 中的区域？

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

问题描述

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

从 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.
*/

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

标签： javascriptd3.jschartsc3.jsregion

解决方案

您可以执行以下操作 - 首先，让我们调用 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>

推荐阅读